0

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;
  }
4

2 に答える 2

3

ルールでは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;
}

このフィドルは、アクションの変更を示しています。それが役立つことを願っています。

于 2013-05-21T13:10:52.387 に答える