如何在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;
}