0

我有一个带有图像“image.jpg”的 div。

通过使用text-align=center，图像水平居中。

但是它不是垂直对齐的。我将如何实现垂直对齐？

<div style="vertical-align: middle;text-align:center;">
    <img title="Title3" src="image.jpg" style="display: inline;" id="idImage">
</div>
4

3 回答 3

1

使用本文vertical-align中描述的属性。请注意，为了开始工作，您也需要这样做。vertical-aligndisplay: table-cell

div.centered {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* other styling */
}

我给你<div>的班级名称的地方centered。

此外，您不应该text-align用于居中，而是添加margin: 0 auto;到图像样式中。

编辑

HTML：

<div class="centered">
    <img src="..." class="centered-image" />
</div>

CSS：

div.centered {
    display: table-cell;
    vertical-align: middle;
}

img.centered-image {
    margin: 0 auto;
}
于 2012-08-22T18:49:04.740 回答
0

你必须知道尺寸才能工作（或者如果你有不同的尺寸，可以使用 javascript 来获取尺寸）。这也将使图像水平居中（所以你不需要你的text-align=center）

取自css-tricks

.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

高度和宽度是相关图像的高度和宽度，顶部和左侧边距设置为各自高度和宽度的一半。

于 2012-08-22T18:46:08.160 回答
0

如果您设置父容器的高度并设置您的margin-top: auto，我认为它应该与中间对齐。这适用于水平对齐，但我没有尝试过垂直对齐。无论如何，它会避免绝对定位

如前所述，您还可以使用 javascript 查找高度，然后设置边距，如下所示： 

var image = document.getElementById("myImage");
var imgHeight = image.style.height;
image.style.marginTop = -(imgHeight/2);
image.style.top = 50%; //you can probably just set this in css and omit this line

你当然必须设置 

#myImage{
  position: absolute;
}

尽管

于 2012-08-22T18:47:58.593 回答