html - 如何将 ul 元素带到 div 的中心？ CSS

Question

我有一个 div，我需要在该 div 的中心放置内部列表。我可以通过指定宽度并执行 margin 0 auto 将它放在中间，但是我需要让它动态化，这样即使我从列表中删除 1 个元素，它也会出现在 div 的中心。或者，如果我添加另一个元素，它将保持居中对齐属性。我该怎么做？

fiddle : https://jsfiddle.net/ucxdfmpc/1/

  <div class="counter-wrapper">
        <div class="counter-inner clrfix">
          <ul>
            <li>
              <span class="counter-image first"></span>
              <span class="counter-number">4</span>
              <span class="counter-text">CREATIVES</span>
            </li>
            <li>
              <span class="counter-image second"></span>
              <span class="counter-number">6</span>
              <span class="counter-text">CODERS</span>
            </li>
            <li>
              <span class="counter-image third"></span>
              <span class="counter-number">4</span>
              <span class="counter-text">DESIGNERS</span>
            </li>
            <li>
              <span class="counter-image fourth"></span>
              <span class="counter-number">2</span>
              <span class="counter-text">WORKERS</span>
            </li>
          </ul>
        </div>



     * {
  padding: 0px;
  margin: 0px;
}
.counter-wrapper {
  background: #fe6261;
  padding-top: 37px;
  padding-bottom: 36px;
  border-top: 1px solid #fe4e4d;
  border-bottom: 1px solid #fe4e4d;
}

.counter-inner ul{
  list-style: none;
 }
.counter-inner ul li {
  float: left;
  width: 14.84375%; /*190px;*/
}

.counter-image {
  display: block;
  width: 66px;
  height: 70px;
  border-right: 2px solid #fc6867;
  float: left;
}

.counter-image.first {
  background: url('../images/counter-1.png') 10px 15px no-repeat;
}

.counter-image.second {
  background: url('../images/counter-2.png') 10px 15px no-repeat;
}

.counter-image.third {
  background: url('../images/counter-3.png') 10px 15px no-repeat;
}

.counter-image.fourth {
  background: url('../images/counter-4.png') 10px 15px no-repeat;
}

.counter-number {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  color: #fd7e7e;
  float: left;
  padding: 12px 18px 0px;
}

.counter-text {
  float: left;
  font-size: 10px;
  color: #fd7e7e;
  padding: 4px 18px 0;
}

Answer 1

事实是，您使用的是 float ，它不会自行清除，因此 ul 元素不会根据内容动态获得正确的尺寸。所以它有点难以居中。

让那些列表元素 display: inline-block 并添加 text-align: center 到包装器，这就是你想要的吗？然后，您当然需要修复背景颜色，但这应该很容易。但无论如何，事物都会居中。

https://jsfiddle.net/fnsyshzw/1/

* {
  padding: 0px;
  margin: 0px;
}
.counter-wrapper {
  background: #fe6261;
  padding-top: 37px;
  padding-bottom: 36px;
  border-top: 1px solid #fe4e4d;
  border-bottom: 1px solid #fe4e4d;
  text-align: center;
}

.counter-inner ul{
  list-style: none;
 }
.counter-inner ul li {
  display: inline-block;
  width: 14.84375%; /*190px;*/
}

.counter-image {
  display: block;
  width: 66px;
  height: 70px;
  border-right: 2px solid #fc6867;
  float: left;
}

.counter-image.first {
  background: url('../images/counter-1.png') 10px 15px no-repeat;
}

.counter-image.second {
  background: url('../images/counter-2.png') 10px 15px no-repeat;
}

.counter-image.third {
  background: url('../images/counter-3.png') 10px 15px no-repeat;
}

.counter-image.fourth {
  background: url('../images/counter-4.png') 10px 15px no-repeat;
}

.counter-number {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  color: #fd7e7e;
  float: left;
  padding: 12px 18px 0px;
}

.counter-text {
  float: left;
  font-size: 10px;
  color: #fd7e7e;
  padding: 4px 18px 0;
}

 <div class="counter-wrapper">
            <div class="counter-inner clrfix">
              <ul>
                <li>
                  <span class="counter-image first"></span>
                  <span class="counter-number">4</span>
                  <span class="counter-text">CREATIVES</span>
                </li>
                <li>
                  <span class="counter-image second"></span>
                  <span class="counter-number">6</span>
                  <span class="counter-text">CODERS</span>
                </li>
                <li>
                  <span class="counter-image third"></span>
                  <span class="counter-number">4</span>
                  <span class="counter-text">DESIGNERS</span>
                </li>
                <li>
                  <span class="counter-image fourth"></span>
                  <span class="counter-number">2</span>
                  <span class="counter-text">WORKERS</span>
                </li>
              </ul>
            </div>