使用文本alignment中心的中心图像?

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

 img { text-align: center; } 

这是行不通的,因为text-align属性适用于块容器,而不是内联元素, img是内联元素。 请参阅W3C规范 。

用这个代替:

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

这并不总是奏效……如果不是,请尝试:

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

来到这个post ,它为我工作:

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

(垂直和水平alignment)

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

 <p style="text-align:center"><img src="..."/></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> 

只有当你需要支持古老的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; } 

唯一的问题是, 段落的宽度必须与图像的宽度相同 。 如果你没有在段落上放一个宽度,它将不起作用,因为它会假设100%,你的图像将被alignment,除非你使用text-align:center

试试小提琴,如果你喜欢试验。

如果你正在使用图像的类,那么以下将做

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

如果它只是一个特定的图像,你想要居中alignment,那么下面会做

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

有三种方法可以使我可以build议的元素居中。

  1. 使用text-align属性

      .parent { text-align: center; } 
      <div class="parent"> <img src="https://placehold.it/60/60" /> </div> 

只需改变父alignment:)

在父属性text-align:center上试试这个

你可以在父级上使用text-align: center ,并改变img来display: inline-block – >因此,它的行为就像是一个文本元素,如果父元素有一个宽度,它将被居中!

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

在容器上保存图像您可以使用css3弹性盒来完美地对图像进行垂直和水平居中alignment。 假设你有图像保持器:那么作为CSS你必须使用

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

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

我会用div来居中alignment一个图像。 如:

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

非背景图像居中取决于是否要将图像显示为内联(默认行为)或块元素。

内联的情况

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

遇阻

如果您想将图像视为其自身的块元素,则text-align属性不会变得敏锐,您应该这样做:

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

你的问题的答案是:

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

是和不是。

  • 是的,如果图像是其包装中唯一的元素。
  • 不,如果在图像的包装器中有其他元素,因为所有图像的兄弟元素的子元素都将inheritancetext-align属性:可能是你不喜欢这种副作用。

参考

  1. 内联元素列表
  2. 集中事物

另一种缩放方式 – 显示它:

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

使用这个到你的IMG CSS

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

如果你想设置图像作为背景,我有解决scheme:

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

display: block带有margin: 0 display: block margin: 0对我来说不起作用,既不包含text-align: center元素。

这是我的解决scheme:

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

translateX被大多数浏览器支持

我发现,如果我有一个图像和文本里面的一些文本,那么我可以使用text-align:centeralignment文本和图像在一举。

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