我怎么能居中对齐(水平)一个图像内的容器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 } <!--link here--> <a href="NotByDesign"> <div id="thumbnailwrapper"> <a href="NotByDesign"> <!--name here--> <b>Not By Design</b> <br> <div id="artiststhumbnail"> <a href="NotByDesign"> <!--image here--> <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" /> </a> </div> <div id="genre">Punk</div> </div>

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


当前回答

CSS flexbox可以用图像父元素的justify-content: center来实现。为了保持图像的纵横比,添加align-self: flex-start;到它。

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

输出:

body { background: lightgray; } .image-container { width: 200px; display: flex; justify-content: center; margin: 10px; padding: 10px; /* Material design properties */ background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .image-2 { width: 500px; align-self: flex-start; /* to preserve image aspect ratio */ } .image-3 { width: 300px; align-self: flex-start; /* to preserve image aspect ratio */ } <div class="image-container"> <img src="http://placehold.it/100x100" /> </div> <div class="image-container image-2"> <img src="http://placehold.it/100x100/333" /> </div> <div class="image-container image-3"> <img src="http://placehold.it/100x100/666" /> </div>

其他回答

CSS flexbox可以用图像父元素的justify-content: center来实现。为了保持图像的纵横比,添加align-self: flex-start;到它。

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

输出:

body { background: lightgray; } .image-container { width: 200px; display: flex; justify-content: center; margin: 10px; padding: 10px; /* Material design properties */ background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .image-2 { width: 500px; align-self: flex-start; /* to preserve image aspect ratio */ } .image-3 { width: 300px; align-self: flex-start; /* to preserve image aspect ratio */ } <div class="image-container"> <img src="http://placehold.it/100x100" /> </div> <div class="image-container image-2"> <img src="http://placehold.it/100x100/333" /> </div> <div class="image-container image-3"> <img src="http://placehold.it/100x100/666" /> </div>

.document { 对齐项目:中心; Background-color: hsl(229, 57%, 11%); border - radius: 5 px; 显示:flex; 高度:40像素; 宽度:40像素; } .document img { 显示:块; 保证金:汽车; } < div class = "文件”> <img src="./images/icon-document.svg" alt="icon-document" /> < / div >

如果您必须内联执行此操作(例如使用输入框时), 这里有一个对我有用的小技巧:把你的周围围起来(这里是图片链接) 在style="text-align:center"的div中

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

要使图像水平居中,这是有效的:

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

我发现的最好的事情(似乎在所有浏览器中都有效)是创建一个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代码对所有标签进行多次更改。