Question

所以这是我有两个专栏的交易。在每一列中都有一个div，它将包含一个图像和一组文本。现在图像的大小是可变的，随后的文本也是如此。但我希望图像在其div中垂直和居中对齐。

下面我有我的尝试，但我认为一般逻辑是错误的我可能过度简化或没有足够的思考。

这是我的jsFiddle演示：http://jsfiddle.net/bardsworth/hbuMy/1/

#collums {

text-align: left;

margin: 10px auto;
width:800px; /*must set the width */
}
/* EVERY DIV */
#collums div{
width:300px;
height:100px; /*i'd like not to have to set the height*/
margin-top:20px;
}
#collums div img{
float:left;
}
#columns div p{
text-align: left;

font-size: 13px;
padding: 0 1em 1em 1em;
width: 75%;
float: right;
}
<div id="collums">
<div>
    <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" width="86" height="52">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div>
    <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" width="86" height="25">
    <p>"Lorem ipsum dolor sit amet,</p>
</div>
<div>
    <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" width="86" height="70">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
<div>
    <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" width="86" height="25">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>

Answer 1

我并不完全确定你的意思＆＃34;但我希望图像在其div中垂直和居中对齐。＆＃34;

所以，我做了两件事。一个图像沿着框水平对齐。另一个与右边的文字垂直对齐。

如前所述，如果您不想指定身高，可以使用overflow：hidden。

为垂直/水平对齐的图像制作了一个jsfiddle：http://jsfiddle.net/jennift/hbuMy/2/

我注意到所有图像的宽度都相同 - 这使得css更容易，因为我可以在<p>标签的左边放一个确切的数字，为垂直中间对齐的图像创建空间

横向：

#collums .horz img{
    display:block;
    margin:0 auto;
}

垂直：

#columns .vert {
    display:table;
}

#columns .vert .inner {
    display: table-cell;
    vertical-align: middle;
}

Answer 2

试试这个http://jsfiddle.net/aAPY2/。它使用Jquery。所以要小心，因为如果它被大量使用会降低你的网站速度。我不知道如何使用css执行此操作。那将是理想的！

2列css3设置，可变高度和垂直定位的对象

2 个答案: