属性text-align: center;一个好方法来中心使用CSS图像?
img {
text-align: center;
}
属性text-align: center;一个好方法来中心使用CSS图像?
img {
text-align: center;
}
当前回答
img{
display: block;
margin-right: auto;
margin-left: auto;
}
其他回答
我发现,如果我在一个div中有一个图像和一些文本,那么我可以使用text-align:center一次性对齐文本和图像。
HTML:
<div class="picture-group">
<h2 class="picture-title">Picture #1</h2>
<img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
<p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
</div>
CSS:
.picture-group {
border: 1px solid black;
width: 25%;
float: left;
height: 300px;
#overflow:scroll;
padding: 5px;
text-align:center;
}
CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100
你可以:
<中心> < img src = "…"/ > < /中心>
我找到的最简单的解决方案是添加到我的img-element:
style="display:block;margin:auto;"
看来我不需要像别人建议的那样在auto前面加0。也许这是正确的方法,但对于我的目的来说,没有“0”也足够了。至少在最新的Firefox、Chrome和Edge上是这样。
Use:
<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>
我认为这是在Laravel框架中将图像居中的方法。
我看到了这个帖子,它对我很有用:
img { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; } < span style=" font - family:宋体;"位置:相对;最小高度:200 px”> < img src = " https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a " > < / div >
(纵横对齐)