Div内容对齐中心不起作用

Question

我试图将内容集中在我的一个div中，但我不能。我试过保证金：0自动;和text-align：center但没有任何改变。如何让社交按钮成为社交div的中心？提前致谢 ！

我的代码：

.list{
  list-style: none;
  padding: 0;
}


.social{
  width:100%;
  height: 100%;
}

.social__btn{
  background:#ccc;
  color:#fff;
  border-radius: 3px;
  width:68px;
  height:50px;
  float: left;
  margin: 5px;
  padding:25px 5px 5px 5px;
  font-size: 26px;
  text-align: center;
}


.profile__bio{
  background: #000;
  border-radius: 3px;
  padding: 10px;
  color:#000;
}
  .bio__item{
    margin-bottom: 8px;
  }

<ul class="profile__bio list">
       
        <li class="bio__item">
          <span class="fa fa-map-marker"></span>
          <p>Some text</p>
        </li>
        <li class="bio__item">
          <span class="fa fa-calendar"></span>
          <p>Some text</p>
        </li>
      </ul>
<ul class="social list">
        <a href=""><li class="social__btn fb"><span class="fa fa-facebook"></span></li></a>
        <a href=""><li class="social__btn linkedin"><span class="fa fa-linkedin"></span></li></a>
        <a href=""><li class="social__btn insta"><span class="fa fa-instagram"></span></li></a>
      </ul>

Answer 1

将display: inline-block;应用于你的.social__btn元素，从它们中删除float: left并将text-align-center应用于.social ul容器，该容器将内嵌块内置于其中。

.list{
  list-style: none;
  padding: 0;
}


.social{
  width:100%;
  height: 100%;
  text-align: center;
}

.social__btn{
  background:#ccc;
  color:#fff;
  border-radius: 3px;
  width:68px;
  height:50px;
  display: inline-block;
  margin: 5px;
  padding:25px 5px 5px 5px;
  font-size: 26px;
  text-align: center;
}


.profile__bio{
  background: #000;
  border-radius: 3px;
  padding: 10px;
  color:#000;
}
  .bio__item{
    margin-bottom: 8px;
  }
 

<ul class="profile__bio list">
       
        <li class="bio__item">
          <span class="fa fa-map-marker"></span>
          <p>Some text</p>
        </li>
        <li class="bio__item">
          <span class="fa fa-calendar"></span>
          <p>Some text</p>
        </li>
      </ul>
<ul class="social list">
        <a href=""><li class="social__btn fb"><span class="fa fa-facebook"></span></li></a>
        <a href=""><li class="social__btn linkedin"><span class="fa fa-linkedin"></span></li></a>
        <a href=""><li class="social__btn insta"><span class="fa fa-instagram"></span></li></a>
      </ul>

Answer 2

text-align:center必须放在容器上，图标不能向左浮动，我想..无论如何，这似乎有效：

.list{
  list-style: none;
  padding: 0;
}


.social{
  width:100%;
  height: 100%;
  text-align: center;
}

.social__btn{
  background:#ccc;
  color:#fff;
  border-radius: 3px;
  width:68px;
  height:50px;
  display: inline-block;
  margin: 5px;
  padding:25px 5px 5px 5px;
  font-size: 26px;
  text-align: center;
}


.profile__bio{
  background: #000;
  border-radius: 3px;
  padding: 10px;
  color:#000;
}
  .bio__item{
    margin-bottom: 8px;
  }

<ul class="profile__bio list">
       
        <li class="bio__item">
          <span class="fa fa-map-marker"></span>
          <p>Some text</p>
        </li>
        <li class="bio__item">
          <span class="fa fa-calendar"></span>
          <p>Some text</p>
        </li>
      </ul>
<ul class="social list">
       <li class="social__btn fb"> <a href=""><span class="fa fa-facebook"></span></a></li>
        <li class="social__btn linkedin"><a href=""><span class="fa fa-linkedin"></span></a></li>
        <li class="social__btn insta"><a href=""><span class="fa fa-instagram"></span></a></li>
      </ul>

Answer 3

使用以下CSS.Here我使用了display：flex和margin：auto。希望这会有所帮助。

.social__btn{
  background:#ccc;
  color:#fff;
  border-radius: 3px;
  width:68px;
  height:50px;
  display: flex;
  margin:auto;
  padding:25px 5px 5px 5px;
  font-size: 26px;
  text-align: center;
}

Answer 4

试试这个 ：

.social {
   text-align: center;
   //other css...
}

.social a {
   display: inline-block;
}

.list{
  list-style: none;
  padding: 0;
}


.social{
  width:100%;
  height: 100%;
  text-align: center;
}

.social a {
  display: inline-block;
}

.social__btn{
  background:#ccc;
  color:#fff;
  border-radius: 3px;
  width:68px;
  height:50px;
  float: left;
  margin: 5px;
  padding:25px 5px 5px 5px;
  font-size: 26px;
  text-align: center;
}


.profile__bio{
  background: #000;
  border-radius: 3px;
  padding: 10px;
  color:#000;
}
  .bio__item{
    margin-bottom: 8px;
  }

<ul class="profile__bio list">
       
        <li class="bio__item">
          <span class="fa fa-map-marker"></span>
          <p>Some text</p>
        </li>
        <li class="bio__item">
          <span class="fa fa-calendar"></span>
          <p>Some text</p>
        </li>
      </ul>
<ul class="social list">
        <a href=""><li class="social__btn fb"><span class="fa fa-facebook"></span></li></a>
        <a href=""><li class="social__btn linkedin"><span class="fa fa-linkedin"></span></li></a>
        <a href=""><li class="social__btn insta"><span class="fa fa-instagram"></span></li></a>
</ul>