小开

只有当你需要支持旧版本的Internet Explorer。

现代的方法是在CSS中使用margin: 0 auto。

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 {
display: block;
margin: 0 auto;
}

小开

最佳答案

这将不起作用，因为text-align属性适用于块容器，而不是内联元素，而且img是内联元素。看到# EYZ2。

用这个代替:

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

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">


</div>

小开

我遇到了这篇文章，它很适合我:

img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">


</div>

(纵横对齐)

小开

实际上，代码的唯一问题是text-align属性应用于标记内的文本(是的，图像也算作文本)。你会想在图像周围放一个span标签，并将它的样式设置为text-align: center，如下所示:

span.centerImage {
text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

The image will be centered. In response to your question, it is the easiest and most foolproof way to center images, as long as you remember to apply the rule to the image's containing span (or div).

小开

.使用实例另一种方法是将一个封闭的段落居中:

<p style="text-align:center"><img src="https://via.placeholder.com/300"></p>

Update:

My answer above is correct if you want to start learning HTML/CSS, but it doesn't follow best practices

小开

简单地改变父对齐:)

在父属性上试试这个:

text-align:center

小开

如果你正在使用一个带有图像的类，那么下面的步骤就可以了

class {
display: block;
margin: 0 auto;
}

如果它只是一个图像在一个特定的类，你想居中对齐，那么下面将做:

class img {
display: block;
margin: 0 auto;
}

小开

你可以在父节点上使用text-align: center，并将img改为display: inline-block →因此，它的行为就像一个文本元素，如果父元素有宽度，它将居中!

img {
display: inline-block
}

小开

另一种缩放方法-显示它:

img {
width: 60%; /* Or required size of image. */
margin-left: 20% /* Or scale it to move image. */
margin-right: 20% /* It doesn't matters much if using left and width */
}

小开

你可以:

# EYZ0

小开

使用这个到你的img CSS:

img {
margin-right: auto;
margin-left: auto;
}

小开

我建议有三种方法来居中一个元素:

使用text-align属性

    .parent {
text-align: center;
}

    <div class="parent">
<img src="https://placehold.it/60/60" />
</div>

李 < / >

使用margin属性

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

<img src="https://placehold.it/60/60" />

Using the position property

img {
display: block;
position: relative;
left: -50%;
}
.parent {
position: absolute;
left: 50%;
}

<div class="parent">
<img src="https://placehold.it/60/60" />
</div>

李 < / >

第一种和第二种方法只在父元素至少和图像一样宽的情况下才有效。当图像比其父图像宽时，图像将不会保持居中!!

但: 第三种方法是一个很好的方法!

这里有一个例子:

img {
display: block;
position: relative;
left: -50%;
}
.parent {
position: absolute;
left: 50%;
}

<div class="parent">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

小开

display: block和margin: 0对我不起作用，用text-align: center元素也不行。

这是我的解决方案:

img.center {
position: absolute;
transform: translateX(-50%);
left: 50%;
}

translateX为大多数浏览器所支持

小开

img{
display: block;
margin-right: auto;
margin-left: auto;
}

小开

如果你想将图像设置为背景，我有一个解决方案:

.image {
background-image: url(yourimage.jpg);
background-position: center;
}

小开

居中非背景图像取决于您想要将图像显示为内联(默认行为)还是块元素。

内联情况

如果您想保持图像的display CSS属性的默认行为，您需要将图像包装在另一个块元素中，您必须设置text-align: center;

块格

如果你想把图像看作是它自己的块元素，那么text-align属性没有意义，你应该这样做:

IMG.display {
display: block;
margin-left: auto;
margin-right: auto;
}

你问题的答案是:

是属性text-align: center;将图像居中的好方法使用CSS呢?

是也不是。

是的，如果图像是其包装器中的唯一元素。
不，如果你在图像的包装器中有其他元素，因为所有的子元素都是图像的兄弟姐妹，将继承text-align属性:并且可能你不喜欢这个副作用。

参考文献

内联元素列表

定心的东西

小开

在容器图像上，你可以使用css3 Flexbox来完美地将图像置于垂直和水平的中心。

让我们假设你有<div class="container">作为图像持有人:

然后作为CSS，你必须使用:

.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

这将使这个div中的所有内容完全居中。

小开

我将使用一个div来居中对齐图像。如:

<div align="center"><img src="your_image_source"/></div>

小开

我发现，如果我在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: # EYZ0

小开

有时我们直接在WordPress管理员的页面中添加内容和图像。当我们将图像插入到内容中并想要对齐该中心时。代码显示为:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

在这种情况下，你可以像这样添加CSS内容:

article p img{
margin: 0 auto;
display: block;
text-align: center;
float: none;
}

小开

使用:

<dev class="col-sm-8" style="text-align: center;"><img src="\{\{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

我认为这是在Laravel框架中将图像居中的方法。

小开

我找到的最简单的解决方案是添加到我的img-element:

style="display:block;margin:auto;"

看来我不需要像别人建议的那样在auto前面加0。也许这是正确的方法，但对于我的目的来说，没有“0”也足够了。至少在最新的Firefox, Chrome和边缘上。

小开

.img-container {
display: flex;
}


img {
margin: auto;
}

这将使图像在垂直和水平方向上处于中心位置

小开

用CSS将图像居中。

img{
display: block;
margin-left: auto;
margin-right: auto;
}

你可以了解更多在这里

小开

使用网格来堆叠图像。这很简单，这是代码

.grid {
display:grid;
}


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

小开

如果您希望将图像垂直和水平地居中，而不考虑屏幕大小，您可以尝试此代码

img{
display: flex;
justify-content:center;
align-items: center;
height: 100vh;
}

小开

如果你的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;
}

中心图像使用文本对齐中心?

不推荐:

Update: