html - Cannot center text of links -
i have tried center text of links created. using bootstrap classes. reason cannot use text-align: center on of elements center text.
.categories_col { margin-top: 10px; text-align: center; } .categories_col .row { margin: 0 auto; text-align: center; } .categories_col { 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 & 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 & 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 & 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>
please me center links names "spirits & wines", "gadgets", etc
you can try rewrite html, using div class 'row' each name ("spirits & wines", "gadgets") , inside create div class col-offset or colmargin, please view center column using twitter bootstrap 3
Comments
Post a Comment