如何在一个div元素水平中心图像?

我怎么能居中对齐(水平)一个图像内的容器div?

这里是HTML和CSS。我还为缩略图的其他元素添加了CSS。它以降序运行，所以最高的元素是所有元素的容器，最低的元素是所有元素的内部。

#thumbnailwrapper { color: #2A2A2A; margin-right: 5px; border-radius: 0.2em; margin-bottom: 5px; background-color: #E9F7FE; padding: 5px; border: thin solid #DADADA; font-size: 15px } #artiststhumbnail { width: 120px; height: 108px; overflow: hidden; border: thin solid #DADADA; background-color: white; } #artiststhumbnail:hover { left: 50px }  <a href="NotByDesign"> <div id="thumbnailwrapper"> <a href="NotByDesign">  <b>Not By Design</b> <br> <div id="artiststhumbnail"> <a href="NotByDesign">  <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" /> </a> </div> <div id="genre">Punk</div> </div>

好的，我已经添加了没有PHP的标记，所以应该更容易看到。这两种解决方案在实践中似乎都行不通。顶部和底部的文本不能居中，图像应该在其容器div中居中。容器有溢出隐藏，所以我想看到图像的中心，因为这通常是焦点所在。

当前回答

Style.css

img#center-img{

 display: block;
 margin: auto;
}

Html

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>

2021-02-12 14:28:34

其他回答

添加到你的CSS:

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

只是引用了一个子元素，在这个例子中就是图像。

2016-01-17 20:32:47

我刚刚在W3 CSS页面上找到了这个解决方案，它回答了我的问题。

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

来源:http://www.w3.org/Style/Examples/007/center.en.html

2014-08-29 13:35:08

使用下面的css命令将图像居中。你必须在图像一开始就给出宽度。

img{
  width: 300px;
  position: fixed;
  left0;
  right:0;

}

2021-11-23 14:33:35

Style.css

img#center-img{

 display: block;
 margin: auto;
}

Html

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>

2021-02-12 14:28:34

我发现的最好的事情(似乎在所有浏览器中都有效)是创建一个CSS类，并包括以下参数:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

然后你可以将你创建的CSS类应用到你的标签，如下所示:

HTML

<img class="center" src="image.jpg" />

你也可以通过以下方法将CSS内联到你的元素中:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

.．.但我不建议写CSS内联，因为如果你想要改变样式，你必须使用你的居中CSS代码对所有标签进行多次更改。

2018-01-20 22:59:21

如何在一个div元素水平中心图像?

推荐文章

最新文章

标签