文本对齐到图像宽度

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>