如何獲得三個元素水平對齊？

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。