イメージのテキスト中心をブートストラップの下に整える

Question

イメージの真下にテキストがあるので、次のようにしてみましたが動作しませんでした。私はdireclty

<div class="our_partners"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12"> 
        <ul> 
         <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url($image1, 'full')); ?>" alt=""></a> 
          <span>High Speed Wifi</span> </li> 
         <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url($image2, 'full')); ?>" alt=""></a> 
          <span> Latest Av Technology</span> 

         </li> 
         <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url($image3, 'full')); ?>" alt=""></a> 
          <span>   Online Booking</span> 


         </li> 
         <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url($image4, 'full')); ?>" alt=""></a> 
    <span>   Concierge Service</span> 


         </li> 
         <li><a href="#"><img src="<?php echo esc_url(wp_get_attachment_url($image5, 'full')); ?>" alt=""></a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

あなたは

ここで結果を見ることができますし、サービス

までスクロールダウンした場合、あなたはそれがここに住んで見ることができます下の絵の中央にテキストをしたいです

http://ubtanz.solitudesoftware.co.uk/

Answer 1

はIMG

.our_partners ul li a img { 
    padding: 29px 0; 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
} 

マージン右を削除与える：15ピクセルを、 margin-right：0;

.our_partners ul li a { 
    margin-right: 0; 
} 

リーに

.our_partners ul li { 
    display: inline-block; 
    margin: 0px 5px; 
} 

と

span { 

     display: block; 
     text-align: center; 
    } 

Answer 2

.our_partners ul li a { 
    margin: auto; 
} 

.our_partners ul li a img { 
    padding: 10px 0; 
    max-width: 100%; 
    max-height: 100%; 
} 
.our_partners ul li a { 
    width:230px; 
    text-align:center; 
} 

これをあなたのcustom.cssに投げ、それを中心にします。

Answer 3

そうのように、<a></a>タグ内のテキストを置く：

<li> 
    <a href="#"><img src="...s2-3.png" alt=""> 
     <span style="display:block;">High Speed Wifi</span> 
    </a> 
</li> 

EDITをすべての画像が整列されていることを確認するには、次のよう最後の画像を設定することができます。さらに

<li> 
    <a href="#"><img src="...cons-2.png" alt=""> 
     <span style="display:block;">&nbsp;</span> 
    </a> 
</li> 

CSSファイルの<span>要素にスタイルを設定して、繰り返しを減らすことができます。

Answer 4

margin-right: 15pxプロパティをリスト要素に使用し、anchor要素を使用することをお勧めします。これは意味があるためです。アンカーではなく、リストの要素を区切ります。

この変更を念頭において、span要素は、利用可能な幅の100％を取り、コンテンツの中央揃えを設定するだけです。

.our_partners li { 
    margin-right: 15px; 
} 
.our_partners a li span { 
    text-align: center; 
    display: inline-block; 
    width: 100%; 
} 

とあなたの現在のマージンがanchor要素から設定削除：

.our_partners ul li a { 
    margin-right: 15px; // <- remove this line 
} 

Answer 5

簡単な方法、<br/>使用：

<ul> 
    <li> 
    <a href="#"><img src="..." alt=""></a><br/> 
    <span>High Speed Wifi</span> 
    </li> 
    (...) 

良い方法、脅威の1を部分的にはブロックとして、aimgとspanタグがインラインである：

<ul> 
    <li> 
    <a href="#" style="display:block;"><img src="..." alt=""></a> 
    <span>High Speed Wifi</span> 
    </li> 
    (...) 

がクラスにCSSスタイルを外部化。あなたも、ブロックスパンにリンクされた画像をラップすることができます：

# foo.css: 
span.span-block { display: block; } 
... 
# 42.html 
<span class="span-block"><a ...><img .../></a></span> 
...