中心列表在div的一侧

Question

我正试图将我的列表放在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;
  }

Answer 1

在ul的规则中，请考虑将display属性设置为block，将边距设置为auto。如果我正确地理解了您要完成的任务，那么您应该在保留所分配的边距的同时为您设置内容。

更新的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显示了行动中的变化。希望有所帮助。

Answer 2

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

   social ul li img {

   width:50px; 
   height:50px;
   

   }

2. 为ul指定固定宽度，然后使用以下代码将其放在中心位置：

   social ul {

   width:300px; /*Example*/
   display:block;
   margin:0 auto;
   

   }