8

円の内側にアイコンを中央揃えにしようとしています。font-awesome さんのアイコンフォントを使用しています。私のコードは次のとおりです

<ul>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
</ul>

CSS

ul {
  list-style: none;
}
ul li {
  display: inline-block;
  margin: 15px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
ul li a {
  font-size: 1em;
  color: #000;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
}

そしてまた私は試しました

a {
 line-height: 100%;
 text-align: center;
}

しかし、これらのアプローチは機能しません。

4

5 に答える 5

10

ソリューションは有効です。幅と高さの宣言を次のように移動するだけですa。

ul {
  list-style: none;
  
  li {
    display: inline-block;
    background-color: pink;
    margin: 15px;
    border-radius: 50%;
    
    a {
      color: #000;
      display: table-cell;
      vertical-align: middle; 
      text-align: center; 

      height: 100px;
      width: 100px;   
      
      &, &:hover, &:active {
        text-decoration: none;
      }
    }
  }
}

結果：

スクリーンショット

于 2013-06-18T10:37:34.037 に答える
3

これは、flexbox を使用すると非常に簡単に行うことができます。それが私の行き先であり、フレックスボックスをサポートしていないブラウザーの場合は上記のソリューションにフォールバックします。Flexbox のサポートは、特に IE 8 9 & 10 がなくなる最近では素晴らしいです。

コツは、 justify-content: center を使用してアイコンを円の中心に揃え、 align-items: center を使用してアイコンを円の垂直方向に揃えることです。

flexbox に関するこの優れたリソースを確認してください。ペンの例については、こちらを参照してください http://codepen.io/celsowhite/pen/pgVegE。

HTML:

<ul class="social_links">
 <li><a href="" target="_blank">
   <i class="fa fa-envelope"></i>
 </a></li>
 <li><a href="" target="_blank">
   <i class="fa fa-twitter"></i>
 </a></li>
 <li><a href="" target="_blank">
   <i class="fa fa-facebook"></i>
 </a></li>
</ul>

SCSS:

ul.social_links {
    display: block;
    padding: 20px 0px 0px;

    li {
        display: inline-block;
        font-size: 23px;
        padding: 0px 10px;

    }
}

ul.social_links i {
  background: black;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all .5s ease-in-out;

  &:hover{
    background: #555555;
  }
}
于 2016-01-28T01:09:24.097 に答える
2

line-height プロパティを使用します。これが最適です。line-height を使用したのと同じ問題がありましたが、完了しました。例

   height:20px;
   width:20px;
   line-height:20px;

行ってもいい

于 2020-07-15T04:23:14.977 に答える
-1

このパディングを「li」に追加します

li{
padding:10px; //or anyvalue
}

または特定のパディングを使用する

li{
padding-top:10px; //or any value
}

パディング値を追加すると、サイズも増加し、調整してバランスを取ることを覚えておいてください。

于 2013-06-18T10:08:42.413 に答える