Cannot center text of links

Question

I have tried everything to center the text of the links I created. I am using bootstrap for some classes. For some reason I cannot use text-align: center on any of the elements to center the text.

.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>

Please help me center the links with names "Spirits & Wines", "Gadgets", etc

yes, they are centered. are u sure that you are loading the css??? please, check that. — YanetP1988, Aug 14 '17 at 16:16

score 2 · Accepted Answer · answered Aug 14 '17 at 16:25

2

You can try to rewrite the html, using a div with class 'row' for each name ("Spirits & Wines", "Gadgets") and inside create div with class col-offset or colmargin, please view Center a column using Twitter Bootstrap 3

answered Aug 14 '17 at 16:25

Francisco Sanchez Barrera

36
3

score 0 · Answer 2 · answered Aug 14 '17 at 18:57

Try this code : <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>

score 0 · Answer 3 · answered Aug 15 '17 at 09:29

I can see that all the answers everybody gave is working but for some reason, in the whole piece of code I have on my PC, it doesn't center when I give the divs a class of row. So what I did was kill the styling bootstrap options given to the divs when it has the name row. I now just called it row1 and then my text-align: center worked which was called in .categories_col

Below is before and after:

You can see that my code editor shows that it is aligned to the left(this is with div row)

Below you can see after I named the divs row1

Thank you community for helping me with options. I wish I could mark all of them as the correct answer but in this case, what I tried by changing the div names worked the best for me.

YOUR ANSWERS ARE STILL CORRECT FOR CENTERING WITH BOOTSTRAP

Cannot center text of links

3 Answers3