css センター寄せしたロゴの隣にsnsアイコンを設置したいです。

Question

wordpress
bootstrap3
でサイトを構築しています。
画像の様にセンター寄せしたロゴの横にsnsアイコンを置きたい場合はどうしたらいいでしょうか？

Comments

[kszk311]

とりあえず現状のソースを記載して下さい。

Answer 1

「sample logo」をdivで背景表示とposition: relative;設定し、snsアイコンをposition: absolute;で任意の好きな位置に設定ではどうですか？

-追記-
ひとつの例として

<div class="sample">
  <img src="SNSアイコンのパス" class="sns">
</div>

.sample {
  margin: 0 auto;
  width: ***px; /* ロゴ画像の幅 */
  height: ***px; /* ロゴ画像の高さ */
  position: relative;
  background-image: url(ロゴ画像のパス);
 
}

.sns {
  position: absolute;
  right: -***px; /* SNSアイコンの幅分をマイナス */
  bottom: 0;
  
}

Comments

[awazon78]

positionだとブラウザ幅が変わった時に良いポジションに来てくれないんですよね。
ブラウザ幅関係なく、センターのロゴの隣にくっつける感じにしたいです。

[yoshinavi]

「sample logo」を内包するdiv（body等）に「position」設定では無く、「sample logo」を背景表示させるdivを「position: relative;」設定し、そのdivに対して、snsアイコンに「position: absolute」「right: （画像の幅分をマイナス）」設定で右横に来ないですか？
-修正しました-