使用"center"水平居中图像

Question

我在水平居中图像时遇到问题。这是我的代码：

<img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px; height:225px;" class="center">

我做错了什么？谢谢你的时间。

Answer 1

您需要将left&rightmargin应用于auto;

溶液：

margin:0 auto;

display:block

<div style="border:solid 1px red">
<img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px; height:225px;margin:0 auto;display:block">
</div>

Answer 2

你可以添加这个

<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>

我只是创建您的班级中心以使其以图像为中心

Answer 3

只需在图像之前添加 p 标签并为其添加样式即可。

<p style="text-align:  center;">
<img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px;height:225px;>
</p>

Answer 4

如果要进行内联样式设置，可以使用中心标记

<center>
<img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px; height:225px;">
<center>