如何将图像置于我的div中心？ （到目前为止，我的img的左边框居中）

Question

我有以下css代码：

blal

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

Answer 1

设置.tos-logo的宽度使div 10px宽，但其中的<img>仍然具有原始尺寸 - 因此，图像似乎不居中。解决这个问题的一种方法是让.tos-logo具有横跨整个屏幕的原始宽度（默认情况下<div> s是块元素），并简单地居中对齐其文本，如下所示： / p>

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

.tos-logo是一个块元素，这意味着它将自然地占据其父元素的整个宽度。如果您没有设置固定的边距并且没有设置边距，则只需使用text-align:center将块元素中包含的任何内联或内嵌块元素居中。

Demo

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