如何在div中将图片居中？ （到目前为止，我的img的左边框居中）

Question

我有以下CSS代码：

.tos{
    width: 500px;
    margin: 0 auto;
}
.tos-logo{
    width: 10px;
    margin: 0 auto;
}

我想将我的徽标（在tos-logo div内）放在中间（水平）。 到目前为止，左边框居中，如何更改它，以使图像的中心直接位于中间？ 这是我的小提琴： http : //jsfiddle.net/pxzr679o/

Answer 1

设置.tos-logo的宽度会使div宽10 .tos-logo ，但其中的<img>仍具有其原始尺寸-因此，图像似乎没有居中。 解决该问题的一种方法是让.tos-logo具有覆盖整个屏幕的原始宽度（默认情况下， <div>是块元素），然后将其文本居中对齐，如下所示：

.tos-logo {
    text-align: center;
    margin: 0 auto;
}

 .tos { margin: 0 auto; width: 500px; } .tos-logo { text-align: center; margin: 0 auto; } 

 <div class="tos"> <div class="tos-logo"> <img src="http://placehold.it/100x120" alt="logologologo"> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet commodo magna sed blandit. Curabitur vehicula libero mi, ac molestie eros congue ut. Aliquam erat volutpat. Nam pharetra felis sapien, at porta nunc hendrerit a. Integer augue ligula, pretium accumsan molestie nec, ornare at metus. Nunc in justo dignissim libero fringilla scelerisque ac eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae diam eros. Vestibulum tempus elit in lorem scelerisque rhoncus. Etiam eu erat arcu. Vivamus at turpis dui. Nulla erat est, iaculis ac leo quis, luctus auctor ex. Nulla sapien ex, egestas quis risus ac, consequat congue odio. Integer tincidunt non metus quis dapibus. Vestibulum at mauris ante. Integer vestibulum in lectus in accumsan. Ut ligula velit, gravida in lacus in, commodo dignissim metus. Etiam luctus, orci dictum bibendum iaculis, augue dui ultricies risus, vel volutpat nisl ligula id massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend est tristique turpis lacinia, sit amet gravida neque efficitur. Duis sapien sem, faucibus vitae scelerisque sed, commodo sed lectus.</p> </div> </div> 

Answer 2

.tos-logo是一个block元素，这意味着它自然会占据其父元素的整个宽度。 如果您未设置固定值且未设置边距，则可以简单地使用text-align:center来将block元素中包含的任何inline或inline-block元素居中。

演示

.tos{
    width: 500px;
    margin: 0 auto;
}
.tos-logo {
    text-align: center;
}