Question

基本上我设置了5个圆圈以在'W'中对齐自己，但我需要帮助设置W以使其位于页面的中心。现在它有点向右。继承人我的css

.wrapper {
 text-align: center;
}

.circlewrap {
 display: inline-block;
 vertical-align: top;
 width: 20%;
 margin-right: 5%;
 margin-left: 5%;
} 

.circle {
 background-color: white;
 border-radius: 50%;
 border: 5px solid black;
 width :250px;
 height: 250px;
}

这是我的HTML

<div class = "wrapper">

  <div class = "circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class="circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class="circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class = "circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class = "circlewrap">
    <div class = "circle"> </div>
  </div>
</div>

Answer 1

您需要为包装器提供宽度，然后将左边距和右边距设置为自动。我在这里做了例子http://jsfiddle.net/Wandile/Lyypuf94/

.wrapper {
  text-align: center;
  width: 1100px;
  margin: 0 auto;
}

Answer 2

您需要为包装器指定宽度，然后指定margin: 0 auto;

#wrapper{width:40%, margin:0 auto;} //the width will be that of the content of the div

以div为中心

2 个答案: