文本對齊到圖像寬度

Question

有沒有辦法讓文本對齊圖像的右側和左側而沒有包裝或溢出？使用下面的當前代碼，文本不會與邊緣對齊，最終可能會因用戶設置而變得太小或太大。

.logo-table { 
    margin-left: 50px; 
    position: absolute; 
    top: 20px; 
    width: 195px; 
} 

.logotext { 
    color: #fff; 
    font-size: 1em; 
    font-weight: bold; 
    text-align: center; 
} 

.headerlogo { 
    width: 195px; 
} 


<div class="logo-table"> 



<img src="/images/header.png" class="headerlogo" align="middle"> 


     <p class="logotext">Neque porro quisquam est</p></td> 

</div> 

Answer 1

text-align: justify;將文本對齊到元素的任何一邊，所以這將適用於你的情況。

我加了text-align-last: center;，所以文字居中 - .headerlogo也應該有100％的寬度，所以你不必寫兩次。

.logo-table { 
 
    margin-left: 50px; 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 150px; 
 
} 
 

 
.logotext { 
 
    font-size: 1em; 
 
    font-weight: bold; 
 
    text-align: justify; 
 
    text-align-last: center; 
 
} 
 

 
.headerlogo { 
 
    width: 100%; 
 
}

<div class="logo-table"> 
 
    <img src="https://csswizardry.com/logo.png" class="headerlogo" align="middle"> 
 
    <p class="logotext">Neque porro quis quam est</p> 
 
</div>