Question

我是编程的新手，并且已经停留了好几天试图让我的按钮在div的中心水平对齐。我试过显示：内联和显示：内联块和我在这个论坛上找到的所有不同的解决方案，没有一个对我有用。这是按钮的CSS：

  div.contact {
      padding: 0px;
      margin: 0px;
      background: #d6d6c2 url(https://clcadvisors.files.wordpress.com/2015/10/img_0914-0.jpg) no-repeat center;
      background-size: cover;
      height: 300px;
      overflow: hidden;
}

ul.soc {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  position: relative;
  display: inline-block;
}

li.socbutton a {
  background-color: gray;
  border: 2px solid black;
  border-radius: 10px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px black;
  font-size: 24px;
  margin: 20px;
  padding: 20px;
  box-shadow: 10px 10px 5px black;
  width: 250px;

}

HTML：

<div class="contact">
    <h3>Contact</h3>
    <div>
      <ul class="soc">
      <li class="socbutton">
        <a href="    https://www.linkedin.com/in/jason-conley-744b27111/" target="blank"><i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
      </li>
      <li class="socbutton">
        <a href="https://twitter.com/JHConley/" target="blank"><i class= "fa fa-twitter fa-fw"></i>TWITTER</a>
      </li>
      <li class="socbutton">
        <a href="https://www.facebook.com/jason.conley.9231712/" target="blank"><i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
      </li>
      </ul>
    </div>
  </div>

以及我在http://codepen.io/SHENKU360/pen/VedRbP

中构建它的codepen的链接

提前感谢您的帮助！

Answer 1

将此添加到您的CSS：

ul.soc {
  width: 100%;
  text-align: center;
}
ul.soc li {
  display: inline-block;  
}

这会将“未排序列表”中的所有内容 - 元素与中心对齐。该元素也需要100％的宽度。里面的所有列表元素都应该是display: inline-block;。

Answer 2

您需要内联li，而不是a s：

li.socbutton {
    display: inline-block;
}

让ul居中：

ul.soc {
    display: block;
    text-align: center;
}

Answer 3

在css中添加以下代码

li{
overflow: hidden;
margin-left:auto;
margin-right:0px; }

此链接也有帮助https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

CSS按钮不会显示内联和溢出div

3 个答案: