如何获得三个元素水平对齐？

Question

我正在尝试使用html和css创建一行，在浏览器的左侧和右侧显示两个图像，并在这两个图像的中间显示文本。我试图让他们全都与镶嵌物水平对齐。下面是相关代码：

<div class="col" id="egg_area"> 
     <img id="egg_img" src="img/egg.png"></img> 
    </div> 
    <div class="col-6" id="introduction"> 
     <p>Hello! Welcome to the Bacon, Egg, and Cheese Sandwich Web Map! The map below will allow you to search for the best deals on your favorite breakfast sandwich! Simply click a location anywhere within the 5 boroughs to reveal its nearest delis. By clicking each of the revealed markers you can view more details about each specific deli.</p> 
    </div> 
    </div> 
    <div class="col" id="bacon_area"> 
     <img id="bacon_img" src="img/bacon.png"></img> 
    </div> 

相关CSS：

#egg_area { 
position: absolute; 
display: inline; 
} 

#egg_img { 
position: relative; 
width: 100px; 
display: inline; 
} 

#intro_area { 
height: 500px; 
font-size: large; 
display: inline; 
} 

#title { 
text-align: center; 
margin: 0 auto; 
color: white; 
text-decoration: underline; 
width: 250px; 
margin-top: 50px; 

} 

#introduction { 
text-align: center; 
margin: 0 auto; 
margin-top: 55px; 
width: 100px; 
color: white; 
margin-top: -9px; 
display: inline; 
} 

#bacon_area { 
position: absolute; 
display: inline; 
} 

#bacon_img { 
position: relative; 
width: 100px; 
display: inline; 
} 

第一形象似乎与居中对齐文本，但第二图像溢出到一个新行。我试过改变图像大小。任何帮助将不胜感激！

Answer 1

裹你一个div内的内容和应用CSS display: flex对准他们水平

CSS

#egg_img { 
position: relative; 
width: 100px; 
} 

#title { 
text-align: center; 
margin: 0 auto; 
color: white; 
text-decoration: underline; 
width: 250px; 
margin-top: 50px; 

} 

#introduction { 
text-align: center; 
margin: 0 auto; 
margin-top: 55px; 
width: 100px; 
color: black; 
margin-top: -9px; 
} 


#bacon_img { 
position: relative; 
width: 100px; 
} 

HTML

<div style="display:flex"> 
    <div class="col" id="egg_area"> 
     <img id="egg_img" src="img/egg.png"> 
    </div> 
    <div class="col-6" id="introduction"> 
     <p>Hello! Welcome to the Bacon, Egg, and Cheese Sandwich Web Map! The map below will allow you to search for the best deals on your favorite breakfast sandwich! Simply click a location anywhere within the 5 boroughs to reveal its nearest delis. By clicking each of the revealed markers you can view more details about each specific deli.</p> 
    </div> 
    <div class="col" id="bacon_area"> 
     <img id="bacon_img" src="img/bacon.png"/> 
    </div> 
</div> 

JSFIDDLE

Answer 2

你可以使用flexbox：

.wrapper { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.bigCol { 
 
    background: cyan; 
 
    width: 60%; 
 
    flex-shrink: 0; 
 

 
    /* Just set the size for the bigger column and set flex-shrink to 0, meaning it will never have 
 
    a smaller width. */ 
 
     
 
    transition: width ease-out .5s; 
 
} 
 

 
.bigCol:hover { 
 
    width: 20%; 
 
} 
 

 
.smallCol { 
 
    background: red; 
 
    /* width: 20%; */ 
 
    
 
    /* No width needed here, they will take the rest of the space, although you could add it anyway 
 
    to make sure both small columns take the same width, regardless of the dimension of their 
 
    content, which could be different. */ 
 
} 
 

 
.smallCol, 
 
.bigCol { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    
 
    /* This will vertically center the content of all the columns. */ 
 
} 
 

 
img { 
 
    width: 100%; 
 
} 
 

 
p { 
 
    margin: 16px; 
 
}

<div class="wrapper"> 
 

 
    <div class="smallCol"> 
 
    <img src="https://media2.giphy.com/media/x6q2SEFflggiQ/giphy.gif?response_id=592190da053fdebcd421e31e"></img> 
 
    </div> 
 

 
    <div class="bigCol"> 
 
    <p>Do you see something weird in the pictures? Hover to resize the columns!</p> 
 
    </div> 
 

 
    <div class="smallCol"> 
 
    <img src="https://media2.giphy.com/media/x6q2SEFflggiQ/giphy.gif?response_id=592190da053fdebcd421e31e"></img> 
 
    </div> 
 
    
 
</div>

Answer 3

一个简单的方法有水平排列的内容是使用display: table和display: table-cell

<div class="display-table"> 
    <div class="col" id="egg_area"> 
     <img id="egg_img" src="img/egg.png"> 
    </div> 
    <div class="col-6" id="introduction"> 
     <p>Hello! Welcome to the Bacon, Egg, and Cheese Sandwich Web Map! 
     The map below will allow you to search for the best 
     deals on your favorite breakfast sandwich! Simply click a 
     location anywhere within the 5 boroughs to reveal its 
     nearest delis. By clicking each of the revealed markers 
     you can view more details about each specific deli.</p> 
    </div> 
    <div class="col" id="bacon_area"> 
     <img id="bacon_img" src="img/bacon.png"> 
    </div> 
</div> 

CSS：

.display-table { 
    display: table; 
    width: 100%; 
} 

.display-table div { 
    display: table-cell; 
    vertical-align: middle; 
} 

要知道，为了这个工作你需要删除display:inline从您的#id css规则，因为它们将具有更高的特异性并覆盖display: table-cell。