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

Sometimes we directly add the content and images on the WordPress administrator inside the pages. When we insert the images inside the content and want to align that center. Code is displayed as:

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

In that case you can add CSS content like this:

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

I discovered that if I have an image and some text inside a div, then I can use text-align:center to align the text and the image in one swoop.

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

Use this to your img CSS:

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

I would use a div to center align an image. As in:

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

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

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

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

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

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

Simply change parent align :)

Try this one on parent properties:

text-align:center

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

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

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

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

You can use text-align: center on the parent and change the img to display: inline-block → it therefore behaves like a text-element and is will be centered if the parent has a width!

img {
    display: inline-block
}

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

仅当您需要支持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。

尝试摆弄小提琴，然后尝试一下。

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

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>

这并不总是有效的...如果不可行，请尝试：

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

你可以做：

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

我遇到了这篇文章，它为我工作：

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>

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

span.centerImage {
     text-align: center;
}

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

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

这将无效，因为该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>