我怎么能居中对齐(水平)一个图像内的容器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中居中。容器有溢出隐藏,所以我想看到图像的中心,因为这通常是焦点所在。


当前回答

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

其他回答

我尝试了几种方法。但这种方式对我来说非常合适

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

在div中居中一个图像

/* standar */ div, .flexbox-div { position: relative; width: 100%; height: 100px; margin: 10px; background-color: grey; } img { border: 3px solid red; width: 75px; height: 75px; } /* || standar */ /* transform */ .transform { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } /* || transform */ /* flexbox margin */ .flexbox-div { display: -webkit-flex; display: flex; background-color: lightgrey; } .margin-img { margin: auto; } /* || flexbox margin */ /* flexbox justify align */ .flexbox-justify { justify-content: center; } .align-item { align-self: center; } /* || flexbox justify align */ <h4>Using transform </h4> <div> <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" /> </div> <h4>Using flexbox margin</h4> <div class="flexbox-div"> <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" /> </div> <h4>Using flexbox justify align</h4> <div class="flexbox-div flexbox-justify"> <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" /> </div>

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

这是我的解决方案:http://jsfiddle.net/marvo/3k3CC/2/

将图片放入newDiv中。 使包含div的宽度与图像相同。 适用余量:0自动;到newDiv。 这将使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;
}