Html 使用文本对齐中心居中图像？

Center image using text-align center?

提问by Web_Designer

Is the property text-align: center;a good way to center an image using CSS?

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

img {
    text-align: center;
}

回答by Mrchief

That will not work as the text-alignproperty applies to block containers, not inline elements, and imgis an inline element. See the W3C specification.

这将不起作用，因为该text-align属性适用于块容器，而不是内联元素，并且img是内联元素。请参阅W3C 规范。

Use this instead:

改用这个：

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>

回答by codecraftnap

That doesn't always work... if it doesn't, try:

这并不总是有效......如果没有，请尝试：

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

回答by Shai Reznik - HiRez.io

I came across this post, and it worked for me:

我遇到了这篇文章，它对我有用：

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>

(Vertical and horizontal alignment)

（垂直和水平对齐）

回答by EssamSoft

Another way of doing it would be centering an enclosing paragraph:

另一种方法是将一个封闭的段落居中：

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

回答by Dimitris Maniatis

You can do:

你可以做：

<center><img src="..." /></center>

<center><img src="..." /></center>

回答by Code Monkey

Actually, the only problem with your code is that the text-alignattribute applies to text (yes, images count as text) inside of the tag. You would want to put a spantag around the image and set itsstyle to text-align: center, as so:

实际上，您的代码唯一的问题是该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).

图像将居中。针对您的问题，这是将图像居中的最简单和最简单的方法，只要您记得将规则应用于图像的包含span（或div）。

回答by Amin Fazlali

There are three methods for centering an element that I can suggest:

我可以建议使用三种方法来使元素居中：

1. Using the text-alignproperty

       .parent {
       text-align: center;
   }

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

2. Using the marginproperty

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

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

3. Using the positionproperty

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

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

1. 使用text-align物业

       .parent {
       text-align: center;
   }

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

2. 使用margin物业

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

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

3. 使用position物业

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

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

---

---

The first and second methods only work if the parent is at least as wide as the image. When the image is wider than its parent, the image will not stay centered!!!

第一种和第二种方法仅在父级至少与图像一样宽时才有效。当图像比其父图像宽时，图像将不会居中！！！

But: The third method is a good way for that!

但是：第三种方法是一个很好的方法！

Here's an example:

下面是一个例子：

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>

回答by Ray Toal

Only if you need to support ancient versions of Internet Explorer.

仅当您需要支持旧版本的 Internet Explorer 时。

The modern approach is to do margin: 0 autoin your CSS.

现代方法是margin: 0 auto在你的 CSS 中做。

Example here: http://jsfiddle.net/bKRMY/

这里的例子：http: //jsfiddle.net/bKRMY/

HTML:

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:

CSS：

p.pic {
    width: 48px;
    margin: 0 auto;
}

The only issue here is that the width of the paragraph must be the same as the width of the image. If you don't put a width on the paragraph, it will not work, because it will assume 100% and your image will be aligned left, unless of course you use text-align:center.

这里唯一的问题是段落的宽度必须与图像的宽度相同。如果您不在段落上放置宽度，它将不起作用，因为它将假定为 100% 并且您的图像将左对齐，除非您当然使用text-align:center.

Try out the fiddle and experiment with it if you like.

如果您愿意，请尝试小提琴并进行实验。

回答by Baig

If you are using a class with an image then the following will do

如果您正在使用带有图像的类，那么以下将执行

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

If it is only an image in a specific class that you want to center align then following will do:

如果只是要居中对齐的特定类中的图像，则执行以下操作：

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

回答by Santoni

On the container holding image you can use a CSS 3 Flexboxto perfectly center the image inside, both vertically and horizontally.

在保存图像的容器上，您可以使用 CSS 3 Flexbox将图像在垂直和水平方向完美地居中。

Let's assume you have <div class="container"> as the image holder:

假设您将 <div class="container"> 作为图像持有者：

Then as CSS you have to use:

然后作为 CSS 你必须使用：

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

And this will make all your content inside this div perfectly centered.

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