ブートストラップ4つの中心アイテムを

Question

.c-footer { 
 
    background: #000; 
 
    padding: 20px 0; 
 
    color: #fff; } 
 
    .c-footer__logo { 
 
    display: inline; } 
 
    .c-footer__link { 
 
    color: inherit; } 
 
    .c-footer__link a { 
 
     color: inherit; } 
 
     .c-footer__link a:hover { 
 
     color: #fff; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="c-footer text-center"> 
 
<div class="c-footer__logo"> 
 
    <img src="http://dynamicdog.se/wp-content/themes/dynamicdog/img/logo.png"> 
 
</div> 
 
<span class="c-footer__link"> 
 
    <a href="#">Malmö</a><span> - </span> 
 
</span> 
 
<span class="c-footer__link"> 
 
    <a href="#">Stockholm</a><span> - </span> 
 
</span> 
 
    <span class="c-footer__link"> 
 
    <a href="#">Malmö</a><span> - </span> 
 
</span> 
 
<span class="c-footer__link"> 
 
    <a href="#">Stockholm</a><span> - </span> 
 
</span> 
 
    <span class="c-footer__link"> 
 
    <a href="#">Malmö</a><span> - </span> 
 
</span> 
 
<span class="c-footer__link"> 
 
    <a href="#">Stockholm</a> 
 
</span> 
 
</div>

Iは下の画像を達成する：左に浮いイメージを持ちながら、テキストをセンタリング

。私は...、ブートストラップクラス、それはすべての要素を中央しかしcenter-textで試してみました

HERESに私のマークアップ：

<div class="c-footer"> 
<div class="c-footer__logo"> 
    <img src="/static/media/q-logo.98ed5701.png"> 
</div> 
<span class="c-footer__link"> 
    <a href="#">Malmö</a><span> - </span> 
</span> 
<span class="c-footer__link"> 
    <a href="#">Stockholm</a><span> - </span> 
</span> 
</div> 

どのようにこれを実現するのでしょうか？

Answer 1

flexプロパティを使用すると、それぞれの側にdivを持つことができます。私の例ではロゴが100pxなので、100pxに設定しました。 imgのクラスがimg-fluidであることを忘れないでください。

私はあなたのためのコードペインを添付しました。私のアプローチで https://codepen.io/Gwapedwink/pen/yPmaVN?editors=1100#0

<footer> 
    <div class="container d-flex align-items-center"> 
    <div class="footer-side"> 
     <img src="http://placehold.it/400/fff/999&text=LOGO" class="img-fluid" /> 
    </div> 
    <div class="mx-auto d-flex"> 
     <a href="#" class="d-inline-block p-3 mx-2">Link Label</a> 
     <a href="#" class="d-inline-block p-3 mx-2">Link Label</a> 
     <a href="#" class="d-inline-block p-3 mx-2">Link Label</a> 
     <a href="#" class="d-inline-block p-3 mx-2">Link Label</a> 
     <a href="#" class="d-inline-block p-3 mx-2">Link Label</a> 
    </div> 
    <div class="footer-side"> 
     <!-- nothing here, homie --> 
    </div> 
    </div> 
</footer> 

<style> 
/* this is all that matters */ 
footer .footer-side { 
    width: 100px; /* whatever you want the logo width to be */ 
} 
</style> 

Answer 2

、私はtext-alignとfloatを使用しています。 text-alignはすべてのインライン項目を揃えます。両方がインラインであるため、テキストと画像の両方に影響します。画像を左側に残したいので、画像を浮動させることができます。これは画像をそのコンテナの左側に置くべきです。

これらの2つを組み合わせると、イメージが左にスティックされ、デバイスの幅に関係なく、c-footer内の残りの部分が中央に揃えられます。 :)

.c-footer { 
 
    background-color: #000; 
 
    height: 80px; 
 
    text-align: center; 
 
} 
 

 
.c-footer__logo { 
 
    padding-left: 20px; 
 
    float: left; 
 
} 
 

 
.c-footer__logo img { 
 
    height: 80px; /* Just for the looks of the example */ 
 
} 
 

 
.c-footer__link a{ 
 
    line-height: 80px; 
 
    color: #fff; 
 
} 
 

 
.c-footer__link:after { 
 
    color: #fff; 
 
    content: '\00a0-\00a0' 
 
} 
 
.c-footer__link:last-child:after { 
 
    content: '' 
 
}

<footer class="c-footer"> 
 
    <div class="c-footer__logo"> 
 
    <img src="https://i.gyazo.com/1e2e3e71c2e236cb827f8026d1aa813e.png"> 
 
    </div> 
 
    <span class="c-footer__link"> 
 
     <a href="#">Bergen</a> 
 
    </span> 
 
    <span class="c-footer__link"> 
 
     <a href="#">Oslo</a> 
 
    </span> 
 
    <span class="c-footer__link"> 
 
     <a href="#">Stavanger</a> 
 
    </span> 
 
    <span class="c-footer__link"> 
 
     <a href="#">Kristiansand</a> 
 
    </span> 
 
    <span class="c-footer__link"> 
 
     <a href="#">Trondheim</a> 
 
    </span> 
 
    <span class="c-footer__link"> 
 
     <a href="#">Drammen</a> 
 
    </span> 
 
</footer>