属性text-align: center;一个好方法来中心使用CSS图像?
img {
text-align: center;
}
属性text-align: center;一个好方法来中心使用CSS图像?
img {
text-align: center;
}
当前回答
除非你需要支持旧版的ie浏览器。
现代的方法是在CSS中使用margin: 0 auto。
例如:http://jsfiddle.net/bKRMY/
HTML:
<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>
CSS:
p.pic {
width: 48px;
margin: 0 auto;
}
这里唯一的问题是,段落的宽度必须与图像的宽度相同。如果你没有在段落上设置宽度,它将不起作用,因为它将假设100%并且你的图像将向左对齐,当然除非你使用text-align:center。
如果你喜欢,可以试试这把小提琴。
其他回答
我找到的最简单的解决方案是添加到我的img-element:
style="display:block;margin:auto;"
看来我不需要像别人建议的那样在auto前面加0。也许这是正确的方法,但对于我的目的来说,没有“0”也足够了。至少在最新的Firefox、Chrome和Edge上是这样。
这将不起作用,因为text-align属性适用于块容器,而不是内联元素,而img是一个内联元素。请参阅W3C规范。
用这个代替:
img。中心{ 显示:块; 保证金:0自动; } < span style=" font - family:宋体;"> <img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> < / div >
如果你的img元素在一个div中,它本身在另一个div中,它的显示被设置为flexbox,就像我这里的例子: (HTML)
<nav class="header">
<div class="image">
<img
src=troll
alt="trollface"
></img>
</div>
<div class="title">
Meme Generator
</div>
<div class="subtitle">
React Course - Project 3
</div>
</nav>
(CSS)
.header{
display: flex;
}
.image{
width: 5%;
height: 100%;
}
.image > img{
width: 100%;
}
你可以这样设置你的。image div垂直对齐:
.image{
width: 5%;
height: 100%;
align-self: center;
}
我将使用一个div来居中对齐图像。如:
<div align="center"><img src="your_image_source"/></div>
如果你正在使用一个带有图像的类,那么下面的步骤就可以了
class {
display: block;
margin: 0 auto;
}
如果它只是一个图像在一个特定的类,你想居中对齐,那么下面将做:
class img {
display: block;
margin: 0 auto;
}