在 div 中居中列表答案

【问题标题】：Center List in side a div在 div 中居中列表
【发布时间】：2015-03-10 04:05:03
【问题描述】：

我正在尝试将我的列表与 div 中的图像居中。这就是我得到的（图标太小而且不居中）。

这是我得到的 css 和 html

       <div id="social">

                <ul>
                    <li><img src="img/footertwitter.png" alt="placeholder+image"></li>
                    <li><img src="img/footerfacebook.png" alt="placeholder+image"></li>
                    <li><img src="img/footeremail.png" alt="placeholder+image"></li>
                </ul>

            </div>


        #social {
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
  }

    #social ul {
/*margin: 0 0 3em 0!important;*/
padding: 0!important;

}

  #social ul li {
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
  }

【问题讨论】：

标签： css list icons center

【解决方案1】：

在ul 的规则中，考虑将显示属性设置为阻止，将边距设置为自动。如果我正确理解您要完成的工作，那应该为您提供中心，同时保留您分配的边距。

更新后的 CSS 如下所示：

#social 
{
  margin: 0 auto;
  text-align: center;
  width: 90%;
  max-width: 1140px;
  position: relative;
}

#social ul 
{
  padding: 0;
  margin:auto;
  display: block;
}

#social ul li 
{
  list-style-type: none;
  display: inline-block;
  margin-left: 1.5em;
  margin-right: 1.5em;
}

这个fiddle 显示了正在发生的变化。希望对您有所帮助。

【讨论】：

【解决方案2】：

您可以根据需要简单地增加图标大小：

社交 ul li img {
```
width:50px; 
height:50px;
```
}
给ul一个固定的宽度，然后用下面的代码把它放在中心：

社交 ul {
```
width:300px; /*Example*/
display:block;
margin:0 auto;
```
}

【讨论】：

社交 ul li img {

社交 ul {