Ekranın ortasındaki iki görüntü arasındaki metni ortalayın

Question

Metin parçasını almaya, sayfada ortalamaya ve solda ve sağda bir görüntü oluşturmaya çalışırken sorun yaşıyorum.

Unutmayın, yalnızca konumlandırma için CSS kodunu değiştirebiliyorum. HTML tamamen doğru. İşte

html kodu: Burada

<div id="container"> 
    <div> 
     <img src="../logo.png" id="header"> 
    </div> 
    <div> 
     <img src="../barbecue01.jpg" id="pic_1"> 
     <div id="aboutus"> 
      <h1>About Us</h1> 
      <p> 
       Our restaurant has the best barbecue that you can find at Philadelphia. 
       We have an amazing team just to serve you, your family, and your friends. 
      </p> 
      <h1>Try It Now!</h1> 
     </div> 
     <img src="../barbecue02.jpg" id="pic_2"> 
    </div> 
</div> 

Ve içine çalıştırıyorum sorun ilk görüntü sadece çalışıyorum, doğru yerde olmasıdır benim CSS

#container { 
    width: 75%; 
    margin: 15px auto 15px auto; 
} 

* { 
    background-color: tan; 
} 

#pic_1 { 
    position: absolute; 
    display: inline-block; 
    float: left; 
} 

#pic_2 { 
    position: absolute; 
    display: inline-block; 
    float: right; 
} 

#aboutus { 
    position: relative; 
    text-align: center; 
    height: 275px; 
    width: 200px; 
    color: white; 
    display: inline-block; 
    left: 275px; 
} 

div { 
    border: solid 2px black; 
} 

olduğunu Sağ tarafa gitmek için 2. resmi alın. Bir sebepten dolayı, sadece sahip değil. Metnin ortalanması gerekiyordu. şamandıra gerçekten düzen için bir anlamı olmadığı için herhangi bir Yardım büyük olurdu

, bu

Answer 1

ben yerine şamandıranın flex kullanmanızı tavsiye ederiz.

Stack

#container { 
 
    width: 75%; 
 
    margin: 15px auto; 
 
} 
 

 
* { 
 
    background-color: tan; 
 
} 
 

 
#container > div:nth-child(2) { 
 
    display: flex; 
 
} 
 

 
#pic_1 { 
 
    flex: 1; 
 
} 
 

 
#pic_2 { 
 
    flex: 1; 
 
} 
 

 
#aboutus { 
 
    flex: 1 1 200px; 
 
    text-align: center; 
 
    height: 275px; 
 
    color: white; 
 
} 
 

 
div { 
 
    border: solid 2px black; 
 
}

<div id="container"> 
 
    <!-- ADD NEW CODE HERE... --> 
 

 
    <div> 
 
    <img src="../logo.png" id="header"> 
 
    </div> 
 

 

 
    <div> 
 
    <img src="../barbecue01.jpg" id="pic_1"> 
 
    <div id="aboutus"> 
 
     <h1>About Us</h1> 
 
     <p>Our restaurant has the best barbecue that you can find at Philadelphia. We have an amazing team just to serve you, your family, and your friends. </p> 
 
     <h1>Try It Now!</h1> 
 
    </div> 
 
    <img src="../barbecue02.jpg" id="pic_2"> 
 
    </div> 
 
</div>

Answer 2

onlara ekran bloğunu ve

#pic_1 { 
    display: block; 
    float: left; 
    width: 33%; 
} 

#pic_2 { 
    display: block; 
    float: left; 
    width: 33%; 
} 

#aboutus { 
    text-align: center; 
    display: block; 
    float: left; 
    width: 33%; 
}