居中圖像垂直和水平內DIV與浮動：左？

我需要一個可行的解決方案做中心具有不同尺寸圖像的繁瑣任務，方形格當浮動：左邊是用來放置在rows.I div的使用圖像div中這樣的伎倆：居中圖像垂直和水平內DIV與浮動：左？

.outer-element{ //wrap tile div 
    display:table-cell; 
    width:300px;height:300px; 
    text-align:center ; 
    vertical-align:middle ; 
    float:left; 
    margin-bottom:15px; 
} 
.inner-element{ //div with image inside 
    display:inline-block; 
}

但我必須使用float：left作爲外部元素將圖像放入行中，當我做圖像不是垂直居中時（它們對齊div的上邊框）我嘗試了其他一些CSS代碼，但是float：左總是使圖像不垂直居中。

來源

2012-05-30 Rorkkkk

請在[JS Fiddle]（http://jsfiddle.net），[JS Bin]（http://jsbin.com/）或類似內容中發佈現場演示，以顯示您正在使用的內容並展示出現問題。 –

浮點不適用於表格單元格。 – jasssonpet

必須在演示http://www.jsfiddle.net –

從.outer-element刪除float:left;，因爲它與如何在表單元格顯示的內容相沖突。如果您需要將容器浮起，請將.outer-element放在另一個左側浮動的容器中。

HTML

<div class="fl"> 
    <div class="outer-element"> 
     <div class="inner-element"> 
      <img src="http://thecybershadow.net/misc/stackoverflow.png" /> 
     </div> 
    </div> 
</div>

CSS

.fl {float:left;} 
.outer-element{ 
    display:table-cell; 
    width:300px; 
    height:300px; 
    vertical-align:middle; 
    background:#666; 
    text-align:center; 
    margin-bottom:15px; 
} 
.inner-element{ 
    display:inline-block; 
}

〔實施例： http://jsfiddle.net/xQEBH/17/

希望這有助於！

來源

2012-05-30 17:56:52 rebz

rebz它的作品就像一個魅力！謝謝 – Rorkkkk

這幫了我！謝謝@rebz –

嘗試這樣http://jsfiddle.net/aEfwC/

<div align="center"> 
    <div class="outer-element"> 
    <div class="image"></div> 
</div> 
</div> 


.outer-element 
{ 
    width:300px;height:300px; 
    float:left; 
    background-color:#2a2a2a; 
    position:relative; 
} 
.image 
{ 
width:128px; 
height:128px; 
background:url(http://thecybershadow.net/misc/stackoverflow.png); 
vertical-align:middle; 
background-repeat:no-repeat; 
}

來源

2012-05-30 17:42:48

你的CSS ...

.outer-element{ //wrap tile div 
    display:table-cell; 
    width:300px;height:300px; 
    text-align:center ; 
    vertical-align:middle ; 
    float:left; 
    margin-bottom:15px; 
} 
.inner-element{ //div with image inside 
    display:inline-block; 
}

只想補充一點，你希望你的元素被左側浮動以下...

.outer-element:before{content: "."; height: 0; overflow: hidden; visibility: hidden; float: left;}

希望這有助於....

來源

2013-03-10 04:56:33

居中圖像垂直和水平內DIV與浮動：左？

回答

相關問題