如何在一个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中居中。容器有溢出隐藏，所以我想看到图像的中心，因为这通常是焦点所在。

当前回答

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

2018-02-15 11:49:20

其他回答

您可以使用flex box以最少的代码对齐您的内容

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container { 宽度:100%; 背景:绿色; 显示:flex; justify-content:中心; 对齐项目:中心; } < div class = "图像容器" > <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> < / div >

Js小提琴链接https://jsfiddle.net/7un6ku2m/

2016-12-19 12:57:40

为左右两边设置相同的像素填充:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

2015-03-25 03:37:43

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

2020-06-21 05:02:40

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

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

2017-06-06 08:20:33

是的，这样的代码可以正常工作

<div>
 <img/>
</div>

提醒大家一下，图像的样式

object-fit : *depend on u*

所以最终的代码就像例子一样

div { 显示:flex; justify-content:中心; 对齐项目:中心; ｝ Div img { object-fit:包含; ｝ < span style=" font - family:宋体;"> <img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style=" 这个特性:50%; 高度:7.5快速眼动; 宽度:7.5快速眼动; ”object-fit:包含;/> < / div >

2020-05-21 09:56:10

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

推荐文章

最新文章

标签