Question

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

  <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

问题是，您正在使用不会自行清除的浮点数，因此ul元素将无法根据内容动态获取正确的维度。所以它有点难以集中。

制作那些列表元素display: inline-block并将text-align: center添加到包装器中，这就是你所追求的吗？那么你需要修复背景颜色，当然，这应该很容易。但无论如何，事情将集中在一起。

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

1 个答案: