Question

我有一个绝对定位的div和里面的图像，我可以将图像垂直对齐到前一个div的中心吗？它可能看起来像一个转贴，实际上可能是，但我找不到适合我的答案。

    <div id="filteredImgContainer">
        <img id="loading" src="images/loader.gif" height="328" alt="" />
    </div>

css：

#filteredImgContainer {
    height: 328px;
    width: 251px;
    max-height: 328px !important;
    max-width: 251px !important;
    position: absolute;
    left: 340px;
    top: 196px;
}



.filteredImg {
    display:block;
    margin:auto;
    height: auto !important;
    width: auto !important;
    max-height: 328px !important;
    max-width: 251px !important;
}

Answer 1

我试过这个并且有效：

#filteredImgContainer
{
   height: 100px;
   width: 100px;
   max-height: 328px !important;
   max-width: 251px !important;
   position: absolute;
   border:solid 1px black;
}
#loading
{
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

Answer 2

如果设置.filteredImgContainer > img { display: inline-block; vertical-align: middle; }，则应将元素与包含div的中间对齐。然后，您可以设置包含div的样式，以将图像移动到您想要的位置。

如果您的img元素包含课程.filteredImg，请将display: block更改为display: inline-block并添加vetical-align: middle;。

Answer 3

在CSS规则之后添加以下内容会将图像对齐到中心

#filteredImgContainer:before{width: 1px; display: inline-block; height: 328px; vertical-align: middle; content: ''; margin-left: -1px;}
#loading{ vertical-align: middle; }

我可以将垂直对齐应用于绝对定位div内的图像吗？

3 个答案: