下面是div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

如何对齐图像,使其位于div的中间和中心?


当前回答

将img设置为display:inline-block,同时将高级div设置为text-align:center也可以完成这项工作

编辑:对于那些正在玩display:inline-block >>>的人,不要忘记例如,两个div像

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

它们之间真的没有空格(如图所示)。

只是基本避免这些(内联块固有)之间的差距。这些空白可以在我现在写的每两个字之间看到!:-)所以…希望这能对你们有所帮助。

其他回答

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

这应该有用。

测试要点:要运行代码段,请单击左键运行代码段,然后单击右链接完整页

#渐变{ 位置:固定;z - index: 10; 上图:0;右:0;底:0;左:0; 透明度:0.8;背景:黑色; 宽度:100%;高度:100%; text-align:中心; } .faders{显示:inline-block;高度:100%;vertical-align:中间;} .faderi{显示:inline-block; vertical-align:中间;} < div id = "渐变" > < span class = "投篮" > < / span > <img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" /> < / div >

Daaawx的答案是可行的,但我认为如果我们消除内联css会更干净。

身体{ 保证金:0; } #over img { margin-left:汽车; margin-right:汽车; 显示:块; } div.example { 位置:绝对的; 宽度:100%; 高度:100%; } <div class="example" id="over"> < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >

这招对我很管用:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

这招对我很管用。

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

注意:在这种情况下,没有与'BrandImage'相关的css类

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}