水平對齊圖像CSS

我想水平對齊我的三個圖像而不是垂直對齊，最簡單的方法是什麼？ example 水平對齊圖像CSS

<div id="christmas_promotion_boxes"> 
      <div id="christmas_promo_1"> 
       <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"> 
      </div> 
      <div id="christmas_promo_2"> 
      <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"> 
      </div> 
      <div id="christmas_promo_3"> 
       <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"> 
      </div> 
     </div> 

#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}

來源

2013-10-30 Karina McGourty

顯示的div作爲inline-block像這樣：

#christmas_promotion_boxes div { 
    display: inline-block; 
}

Fiddle

來源

2013-10-30 13:13:24

添加此

#christmas_promotion_boxes div{ 
float: left;

}

來源

2013-10-30 13:13:39

您需要包含要浮動的圖像的div。

添加這部分代碼到你的CSS：

#christmas_promotion_boxes > *{ 
    float:left; 
}

http://jsfiddle.net/tDfCR/5/

來源

2013-10-30 13:13:43

你將所有東西都浮在左邊那樣，不僅僅是div。 –

不，這只是選擇直接後代（在這種情況下只是div） –

Oups我的壞，錯過了> –

當我有內聯元素，我總是把他們在UL和顯示李的內聯。這樣您就不必擔心浮動任何東西，而且它更具可擴展性。

<ul> 
    <li id="christmas_promo_1"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li> 
    <li id="christmas_promo_2"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li> 
    <li id="christmas_promo_3><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li> 
</ul> 

ul{ 
width:5em 
} 

li{ 
display:inline; 
list-style-type:none; 
}

來源

2013-10-30 13:24:00 zazvorniki

從@zazvorniki接受的答案稍有不同：

<div class="christmas_promotion_boxes"> 
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/> 
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/> 
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/> 
</div> 

.christmas_promotion_boxes { 
    width: 1000px; 
    margin: 0 auto 0 auto; 
    display: inline-block; 
}

http://jsfiddle.net/tDfCR/114/

確保width較大的總和所有所有圖像的寬度。

來源

2015-05-23 14:30:53

水平對齊圖像CSS

回答

相關問題