Question

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

img {
    text-align: center;
}

Answer 1

这不起作用，因为text-align属性适用于块容器，而不是内联元素，img是内联元素。请参阅the W3C spec。

请改用：

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

Answer 2

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

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

Answer 3

遇到this post，它对我有用：

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

（垂直和水平对齐）

Answer 4

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

<p style="text-align:center"><img src="..."/></p>

Answer 5

你可以这样做：

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

Answer 6

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

我可以建议使用三种方法来集中元素。

使用text-align属性

＆＃13;

    .parent {
    text-align: center;
}

＆＃13;

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

＆＃13;

使用margin属性

＆＃13;

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

＆＃13;

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

＆＃13;

使用position属性

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

仅当您需要支持古老的IE浏览器时。

现代方法是在CSS中执行margin: 0 auto。

此处示例：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

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

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

如果它只是你想要居中对齐的特定calss中的图像，那么下面将执行

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

Answer 10

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

Answer 11

只需更改父对齐：）

在父级属性text-align:center

上尝试此操作

Answer 12

您可以在父级上使用text-align: center并将img更改为display: inline-block - ＆gt;因此它的行为类似于文本元素，如果父级有宽度，它将居中！

img {
    display: inline-block
}

Answer 13

在容器保持图像上您可以使用css3 flex box将图像完全居中，包括垂直和水平。假设您拥有图像持有者：然后作为css你必须使用

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

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

Answer 14

如果你想把图像设置为背景，我有解决方案：

getCheckedRadioButtonId()

Answer 15

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

内联案例

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

阻止案例

如果您想将图像视为自己的块元素，那么text-align属性不会产生任何影响，您应该这样做：

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

您的问题的答案：

属性是text-align：center;一种使图像居中的好方法使用CSS？

是和否。

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

<强>参考

Answer 16

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

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

Answer 17

另一种扩展方式 - 显示它：

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

Answer 18

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

.grid {
   display:grid;
}

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

Answer 19

使用 CSS 将图像居中。

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

您可以了解更多here

Answer 20

.img-container {
  display: flex;
}

img {
  margin: auto;
}

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

Answer 21

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

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

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

Answer 22

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

我认为这是在laravel框架中获取中心图像的方法。

Answer 23

有时我们直接在页面内的wordpress管理员中添加内容和图片。当我们在内容中插入图像并希望对齐该中心时。代码显示为：

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

在这种情况下，你可以像这样添加css：

article p img { 保证金：0自动; 显示：块; 文本对齐：中心; 浮动：无; }

希望在这种情况下会有所帮助。

Answer 24

我发现如果我在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

Answer 25

带有display: block的

margin: 0对我不起作用，也不包含text-align: center元素。

这是我的解决方案：

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

<强> translateX is supported by most browsers

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

25 个答案: