Question

我正在尝试减少仅占屏幕大约50％的图像下的文本宽度，所以我尝试使用style = width:50%但由于某种原因，宽度保持不变。
Here is the output I get。我希望它能使标题整齐地包含在图像中。
我做错了什么？

我的代码：

<div class="text-center">
  <h1>Evelyn Lauder </h1>
  <h5 class="font-italic"> 1936-2011</h5>
  <img src=h ttp://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <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

如果您有used a validator，则会显示您的错误。

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

如果属性值包含空格字符，则属性值的引号为必需。

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

注意：您有许多其他错误，验证人员会指出这些错误。

Answer 2

按照这段代码。

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

<div style="width: 50%;margin: 0 auto;"><h7 > "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7> </div>

</div>

为div添加样式。希望它有所帮助。！

Answer 3

我认为你正在寻找这个。将display:inline-block应用于标题文字。就是这样:)）

<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" </img> <br>
</div>    
  <h7 style="width:50%; display:inline-block; font-style:italic;" class="text-center"> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>

如何减少HTML文本的宽度？

3 个答案: