HTML 텍스트의 너비를 줄이는 방법은 무엇입니까?

Question

화면의 약 50 % 만 차지하는 이미지 아래의 텍스트 너비를 줄이려고 시도 했으므로 style = width:50%을 사용해 보았습니다. 그러나 어떤 이유로 그 너비는 그대로 유지됩니다.
Here is the output I get.
캡션이 이미지 아래에 깔끔하게 포함되도록하고 싶습니다.
내가 뭘 잘못하고 있니?

내 코드 : 당신이 used a validator이 있다면

는

<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

귀하의 오류가 밝혀 질 것입니다.

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