画像の幅とテキストの位置合わせ

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％にする必要があります。したがって、2回書く必要はありません。

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