Wie kann ich drei Elemente horizontal ausrichten?

Question

Ich versuche, eine Zeile mit HTML und CSS zu erstellen, die zwei Bilder auf der linken und rechten Seite des Browsers und Text in der Mitte dieser beiden Bilder anzeigt. Ich versuche, sie alle horizontal ausgerichtet mit Inlay liegen zu lassen. Hier ist der relevante Code:

<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> 

Relevante 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; 
} 

Das erste Bild erscheint mit dem Text zentriert ausrichten, aber das zweite Bild überläuft in eine neue Zeile. Ich habe versucht, die Bildgröße zu ändern. Jede Hilfe würde sehr geschätzt werden!

Answer 1

Wrap Sie Inhalte innerhalb eines div und anwenden CSS display: flex ihnen horizontal ausrichten

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

Sie flexbox verwenden:

.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

Eine einfache Möglichkeit, horizontal ausgerichtet haben Inhalt ist display: table und 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 zu verwenden:

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

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

Beachten Sie, dass auf diese Arbeit für Sie müssenentfernenvon Ihrem #id CSS-Regeln, da sie höhere Spezifität haben und die display: table-cell überschreiben würden.