How to reduce width of HTML text

How to reduce width of HTML text
0

#1

I am trying to reduce the width of a piece of text under an image that only takes up about 50% of the screen, so I’ve tried using style = width:50% but for some reason, the width stays the same.
Here is the output I get.
I want it so that the caption is neatly contained under the image.
Any hints on what I’m doing wrong?

My code:

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

#2

It looks like you’re missing double quotes around width: 50%; which might be affecting the parsed style. Also make sure that your <img tag is closed properly.

<img src=h ttp://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <br>

should be:

<img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br />


#3

I did those changes, and now the text-width works now, but now the text isn’t centered anymore.

New Code:

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

#4

Try:

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