如何在左側和右側居中放置圖像和浮動文本？

-1

我要居中圖像，然後浮動文本（或按鈕）左，右，因爲它的下面wireframed：如何在左側和右側居中放置圖像和浮動文本？

enter image description here

我知道你不能float: center;和快速的Web搜索每推薦解決方案有點破解。那麼我怎麼能爲這個特定的情況設置css呢？我使用Twitter Bootstrap來獲取任何有價值的東西（本例中可能沒有任何內容）。

2013-01-08 kwh941

你熟悉絕對定位，在您的情況下工作 –

你可以float: left所有3列與百分比寬度。事情是這樣的：

#col1, #col2, #col3 { 
    float: left; 
} 

#col1, #col3 { 
    width: 25%; 
} 

#col2 { 
    width: 50%; 
    text-align: center; 
}

此外，如果你正在使用Twitter的引導，你可能需要3列使用Fluid Grid System。

來源

2013-01-08 16:27:07

感謝這個工作，但很難實現，因爲響應的數量（文本氣泡）可能會有所不同，所以我需要添加邏輯來檢查和創建新的行，如果響應的數量> 2。如果有多於兩個響應，那麼第二行變得難以執行...... – kwh941

希望你可以使用圖像的固定寬度。然後，您可以使用postion: absolute和一個否定margin居中圖像。然後你可以選擇float對任何一方的反應。

這裏是它的外觀在樣機： jsFiddle

您可能需要設置一個最小高度爲容器：如果沒有反應，他會完全崩潰，而忽略圖像/中間列。

反應的最大寬度也可能是必需的。然後他們將適合在兩側的空地上。

來源

2013-01-08 21:13:09 woestijnrog

如果你不關心你的設計的響應和容器和居中的圖像尺寸是不變的（獨立於視口），那麼你可以絕對位置的所有元素：

<div style="position: relative;"> 
    <div style="position: absolute; top: HEIGHT_OF_THE_VIEWPORT_MINUS_HEIGHT_OF_THE_IMAGE_DIVIDED_BY_2; left: WIDTH_OF_THE_VIEWPORT_MINUS_WIDTH_OF_THE_IMAGE_DIVIDED_BY_2;"> 
    <img src="..." /> 
    </div> 
</div>

在響應式佈局你將不得不處理未知大小的容器和未知大小的中心圖片。

您可以輕鬆地使用text-align: center;和margin: 0 auto;樣式水平居中。

在CSS中垂直居中是棘手的部分。您可以使用display: table;和vertical-align: middle;（「表格方法」），但使用Internet Explorer時會遇到問題。「負邊距」和「定位」方法在IE中可用。搜索在谷歌「垂直對齊CSS」顯示了許多有用的討論，但我推薦的這適用於好的瀏覽器，也即兩個以前的方法（見this article）組合> = 6：

<div style="display: table; height: 400px; #position: relative; overflow: hidden;"> 
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> 
    <div class="greenBorder" style=" #position: relative; #top: -50%"> 
     some<br/> 
     content 
    </div> 
    </div> 
</div>

訣竅是在IE中將IE部分與「others」部分混合在一起，IE不能讀取的格式前綴爲#。

請注意，這種方式您將調整到不同的容器大小，但居中的圖像不會響應地改變其大小。

好方法（簡單和便攜）是使用居中圖像作爲背景。嘗試使用：

#row { 
    background-image: url(img/image.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
}

用CSS佈局白手起家分隔左，右列（#col1，#col2和#col3）。您將獲得水平和垂直居中的圖像。

更新：？？後臺方法不允許響應縮小圖像，如果你不希望它擴大（擴大）:(

來源

2013-01-08 21:35:16

如何在左側和右側居中放置圖像和浮動文本？

回答

相關問題