Question

我已经尝试了所有内容来集中我创建的链接的文本。我在某些课程中使用bootstrap。出于某种原因，我不能在任何元素上使用text-align：center来居中文本。

＆＃13;

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

＆＃13;

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

＆＃13;

请帮助我将链接集中在姓名＆＃34; Spirits＆amp;葡萄酒＆＃34;，＆＃34;小工具＆＃34;等

Answer 1

您可以尝试重写html，使用每个名称为“row”类的div（“Spirits＆amp; Wines”，“Gadgets”）和使用class col-offset或colmargin创建div，请查看{{ 3}}

Answer 2

试试这段代码：     <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>

Answer 3

我可以看到每个人给出的所有答案都在起作用，但出于某种原因，在我在PC上的整段代码中，当我给出 divs 时它并不重要一类行。所以当我的名字行时，我所做的就是杀掉给 divs 的样式引导选项。我现在只是将其称为 row1 ，然后我的 text-align：center 工作，这在 .categories_col

中调用

以下是之前和之后：

你可以看到我的代码编辑器显示它与左边对齐（这是div 行）

在我将div命名为 row1

后，您可以看到

感谢社区帮助我选择。我希望我能将所有这些标记为正确的答案，但在这种情况下，我尝试通过更改div名称对我来说是最好的。

您的答案仍然正确以BOOTSTRAP为中心

无法居中链接文本

3 个答案: