1

プロジェクトのテンプレートを作成するためにブートストラップを使用しています。いくつかのソーシャル アイコンを中央に配置する必要があります。画像は次のとおりです。

ここに画像の説明を入力

今、私は 1 つまたは 2 つのソーシャル アイコンを追加する必要があるかどうかを決定する JS をいくつか持っています。これはCSSだけで可能ですか？

画像では、margin-left を適用したところ、左に浮いているため、多少位置合わせされますが、反応が悪く、単一の画像をサポートしていません。

HTMLは次のとおりです。

<div class="row social_row">
    <img class="social_icon" id="facebook_share" src="assets/images/social/facebook.png">
    <img class="social_icon" src="assets/images/social/pinterest.png">
</div>

CSSは次のとおりです。

.social_row {
   margin-right: 15px;
   margin-left: 15px;
}

.social_icon {
  height: 45px; 
  width: 45px; 
  display: block; 
  float: left;
  margin-right: 5%;
}
4

1 に答える 1

0

text-align:center行（.text-centerBootstrapで信じているクラス）に左/右マージンを置きimgます。

http://bootply.com/88212

<div class="row social_row text-center">
    <img class="social_icon" id="facebook_share" src="assets/images/social/facebook.png">
    <img class="social_icon" src="assets/images/social/pinterest.png">
</div>

CSS:

.social_row img {
    margin:0 2.5%;
}
于 2013-10-17T03:07:25.763 に答える