如何将图像置于我的div中心？(how can I center the image in my div? (so far the left border of my img is centered)

如何将图像置于我的div中心？(how can I center the image in my div? (so far the left border of my img is centered))

我有以下css代码：

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

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

I have the following css code:

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

and I want to put my logo (inside tos-logo div) in the center (horizontally). So far the left border is centered, how can I change it so the center of my image is directly in the middle? here is my fiddle: http://jsfiddle.net/pxzr679o/

最满意答案

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

.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> 
  
 
Setting .tos-logos width makes the div 10px wide, but the <img> inside it still has its original dimensions - hence, it appears that the image is not centered. One way to fix that would be to let the .tos-logo have its original width that spans the whole screen (<div>s are block elements by default), and simply center align its text, like the following:
 
.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>