居中图像垂直和水平内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与浮动：左？

回答

相关问题