Текст выравнивается по ширине изображения

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>