リンクのテキストを中央に配置できません

作成したリンクのテキストをすべて中央に配置しました。私はいくつかのクラスにブートストラップを使用しています。何らかの理由で私はtext-align：テキストの中央に要素のいずれかを使用することはできません。リンクのテキストを中央に配置できません

.categories_col { 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 

 
.categories_col .row { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.categories_col a { 
 
    font-family: rockwell; 
 
    font-size: 18px; 
 
    color: #8d8d8d; 
 
} 
 

 
.categories_col a:hover { 
 
    text-decoration: none; 
 
    color: #087abf; 
 
} 
 

 
.categories_col a:active { 
 
    text-decoration: none; 
 
    color: #087abf; 
 
}

<div class="container"> 
 
    <div class="row "> 
 
    <div class="col categories_col"> 
 
     <div class="row"><a href="#">Spirits &amp; Wines</a></div> 
 
     <div class="row"><img src="images/wine.jpg"></div> 
 
     <div class="row"><a href="#"><i class="mdfi_av_play_circle_fill"></i></a></div> 
 
    </div> 
 

 
    <div class="col categories_col"> 
 
     <div class="row"><a href="#">Gadgets</a></a> 
 
     </div> 
 
     <div class="row"><img src="images/ipod.jpg"></div> 
 
     <div class="row"><a href="#"><i class="mdfi_av_play_circle_fill"></i></a></div> 
 
    </div> 
 

 
    <div class="col categories_col"> 
 
     <div class="row"><a href="#">Outdoor &amp; Living</a></div> 
 
     <div class="row"><img src="images/tent.jpg"></div> 
 
     <div class="row"><a href="#"><i class="mdfi_av_play_circle_fill"></i></a></div> 
 
    </div> 
 
    <div class="col categories_col"> 
 
     <div class="row"><a href="#">Flowers &amp; Hampers</a></div> 
 
     <div class="row"><img src="images/beauty.jpg"></div> 
 
     <div class="row"><a href="#"><i class="mdfi_av_play_circle_fill"></i></a></div> 
 
    </div> 
 
    <div class="col categories_col"> 
 
     <div class="row"><a href="#">Lingerie</a></div> 
 
     <div class="row"><img src="images/lingerie.jpg"></div> 
 
     <div class="row"><a href="#"><i class="mdfi_av_play_circle_fill"></i></a></div> 
 
    </div> 
 
    </div> 
 
</div>

「あなたはクラスでdiv要素を使用して、HTMLを書き換えるしようとすることができるなど

出典

2017-08-14 Feyt

WITHセンタリングするためSTILL正しいhttps://www.bootply.com/B41VITCLjg – j08691

この –

yesのために 'テキストcenter'ネイティブブートストラップクラスを使用してみてください、彼らは中心に置かれています。あなたはCSSを読み込んでいるのですか？してください、それを確認してください。 –

、私は名前を "スピリッツ&ワイン"、 "ガジェット" とのリンクを中央助けてください（ "Spirits & Wines"、 "Gadgets"）と内部でクラスcol-offsetまたはcolmarginを持つdivを作成してください。Center a column using Twitter Bootstrap 3

出典

2017-08-14 16:25:12

このコードを試してください：0123私は誰もが与えたすべての答えは、作業が、何らかの理由で、私は自分で持っているコードの全体の一部にされていることがわかります<div class="container"> <div class="row " > <div class="col-md-12" style='text-align:center'> <a href="#">Spirits & Wines</a><br/> <img src="images/wine.jpg"><br/>
<a href="#"><i class="mdfi_av_play_circle_fill"></i></a> </div> </div>
</div>