使用文字对齐中心使图片居中？

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

img {
    text-align: center;
}

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

使用此代替：

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

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

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>

（垂直和水平对齐）

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

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

你可以做：

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

实际上，代码的唯一问题是该text-align属性适用于标记内的文本（是，图像算作文本）。您可能希望span在图像周围放置一个标签，并将其样式设置为text-align: center，如下所示：

span.centerImage {
     text-align: center;
}

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

图像将居中。回答您的问题，这是居中图像的最简单，最简单的方法，只要您记得将规则应用于图像的包含span（或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>

   运行代码段隐藏结果

   展开摘要

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

但是：第三种方法是个好方法！

这是一个例子：

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>

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

现代方法是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;
}

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

尝试小提琴并根据需要尝试。

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

如果您正在使用带有图像的类，则将执行以下操作

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

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

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

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

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

然后，作为CSS，您必须使用：

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

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

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

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

似乎我不需要像其他人建议的那样在“自动”之前添加“ 0”。也许这是正确的方法，但是对于我的目的而言，即使没有“ 0”，它也能很好地工作。至少在最新的Firefox，Chrome和Edge上。

只需更改父对齐:)

在父属性上尝试以下一项：

text-align:center

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

img {
    display: inline-block
}

我将使用div将图像居中对齐。如：

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

如果要将图像设置为背景，我有一个解决方案：

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

使非背景图像居中取决于您要显示图像为嵌入式（默认行为）还是块元素。

内联的情况

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

封锁案

如果您想将图像视为其自身的块元素，则text-align属性不会产生任何感觉，您应该这样做：

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

您问题的答案：

该属性是否为text-align：center; 用CSS将图像居中的好方法？

是的，没有。

• 是的，如果图像是包装器中唯一的元素。
• 否，如果您在图像包装器中还有其他元素，因为作为图像同级的所有子元素都将继承该text-align属性：并且可能您不希望这种副作用。

参考文献

1. 内联元素列表
2. 居中

缩放的另一种方法-显示它：

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 */
}

使用此到您的imgCSS：

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

display: block跟margin: 0我没有工作，没有包装用text-align: center的元素。

这是我的解决方案：

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

translateX 大多数浏览器都支持

我发现，如果在内有图像和一些文本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

有时，我们直接在页面内的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-container {
  display: flex;
}

img {
  margin: auto;
}

这将使图像在垂直和水平方向上居中