使用文本对齐中心的中心图像？

Question

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

img {
    text-align: center;
}

Answer 1

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

请改用:

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

Answer 2

这并不总是有效...如果没有,请尝试:

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

Answer 3

遇到这篇文章,它对我有用:

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

(垂直和水平对齐)

Answer 4

另一种做法是围绕一个封闭的段落:

<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>

Answer 5

实际上,代码的唯一问题是该text-align属性适用于标记内的文本(是的,图像计为文本).您可能希望span在图像周围添加标记并将其样式设置为text-align: center,如下所示:

span.centerImage {
     text-align: center;
}

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

图像将居中.在回答您的问题时,只要您记得将规则应用于包含span(或div)的图像,这是最简单,最简单的图像居中方式.

Answer 6

你可以做:

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

Answer 7

我可以建议使用三种方法来对中元素进行居中.

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>

第一种和第二种方法仅在父亲至少与图像一样宽的情况下才有效.当图像比其父图像宽时,图像将不会保持居中!

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

这是一个例子:

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>

Answer 8

只有你需要支持古老的IE浏览器.

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

示例: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;
}

只发出ihere是段落的宽度必须与图像的宽度相同.如果您没有在段落上放置宽度,它将无法工作,因为它将采用100%并且您的图像将向左对齐,除非您当然使用text-align:center.

如果你愿意,试试小提琴并试试它.

Answer 9

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

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

然后作为 CSS 你必须使用：

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

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

Answer 10

如果您正在使用带有图像的类,那么以下操作就可以了

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

如果它只是你想要居中对齐的特定calss中的图像,那么下面将会这样做

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

Answer 11

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

Answer 12

我找到的最简单的解决方案是将其添加到我的 img-element 中：

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

似乎我不需要像其他人建议的那样在“自动”之前添加“0”。也许这是正确的方法，但它在没有“0”的情况下也能很好地满足我的目的。至少在最新的 Firefox、Chrome 和Edge 上。