2017-02-22 65 views
0

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

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

回答

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>