Question

出于某种原因，my text isn't being centered on the page即使我有标题文本的“文本中心”类。我做错了什么？

<div class="text-center">
  <h1>Evelyn Lauder </h1>
  <h5 class="font-italic"> 1936-2011</h5>
  <img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br /><br>
</div>
<div style= "width: 50%"; class="text-center font-italic">
  <h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>

Answer 1

删除宽度......

<div class="text-center font-italic">

或者如果你希望div为50％并且在中间...

，则添加margin-left

<div style= "width: 50%; margin-left:25%;" class="text-center font-italic">

Codepen链接： https://codepen.io/anon/pen/zpWOod

Answer 2

它只是对齐中心。但是你的宽度只有50％。所以从代码中删除width:50%即可。

<div class="text-center font-italic">
   <h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>

Answer 3

删除宽度：50％。

<div data-role="page">
  <div class="text-center">
  <h1>Evelyn Lauder </h1>
  <h5 class="font-italic"> 1936-2011</h5>
  <img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br /><br>
</div>
<div class="text-center font-italic">
  <h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>

Answer 4

也尝试这种方式。我刚刚将对齐中心添加到div中。然后删除宽度。

<div align="center">
  <h1>Evelyn Lauder </h1>
  <h5><i> 1936-2011</i></h5>
  <img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br /><br>
</div>
<div align="center">
  <h6><i> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </i></h6>
</div>

希望这有用。

HTML / CSS（Bootstrap） - 为什么我的文本不居中？

4 个答案: