下面是div
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何对齐图像,使其位于div的中间和中心?
下面是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;
}