text-align:rightでdiv枠内のimgタグの画像が左に寄せられる現象と対処法を紹介します。
概要
枠のCSS設定で
text-align:rightを設定すると右寄せの表示になりますが、
div枠内に配置したimgタグの画像が左寄せになってしまいます。
現象の確認をしつつ対処方法を紹介します。
現象の確認
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="inline-block-div.css" />
</head>
<body>
<div class="mainframe">
<p>テキスト1です。</p>
<div>テキスト2です。</div>
<div class="imageframe"><img src="image.svg" /></div>
<img class="imageframe" src="image.svg" /><br />
<p>テキスト3です。</p>
</div>
</body>
</html>
.mainframe {
width:600px;
border:1px solid #808080;
margin: 1rem auto 1rem auto;
text-align:right;
}
.imageframe {
width:6rem;
}
.imageframe img{
width: 100%;
}
上記のHTMLファイルをWebブラウザで表示すると下図のページが表示されます。
div枠に囲まれたimgタグの画像は左寄せで表示されていることが確認できます。
対処法
div枠をblock要素からinline要素にすると、右寄せにできます。
div枠のクラスをinline要素にするか、inline-block要素にします。
コード
以下のコードに変更します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="inline-block-div.css" />
</head>
<body>
<div class="mainframe">
<p>テキスト1です。</p>
<div>テキスト2です。</div>
<div class="imageclass1"><img src="image.svg" /></div><br/>
<img class="imageclass2" src="image.svg" /><br />
<p>テキスト3です。</p>
</div>
</body>
</html>
.mainframe {
width:600px;
border:1px solid #808080;
margin: 1rem auto 1rem auto;
text-align:right;
}
.imageclass1 {
display:inline-block;
width:6rem;
}
.imageclass1 img{
width: 100%;
}
.imageclass2 {
width: 6rem;
}
解説
imgタグを囲むdivには、
inline-block を指定しインライン要素として表示します。
.imageclass1 {
display:inline-block;
width:6rem;
}
インライン要素となったことで、
imageclass1のdiv枠は開業されないため、末尾に
<br/>タグを追加します。
<div class="mainframe">
<p>テキスト1です。</p>
<div>テキスト2です。</div>
<div class="imageclass1"><img src="image.svg" /></div><br/>
<img class="imageclass2" src="image.svg" /><br />
<p>テキスト3です。</p>
</div>
実行結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
上のdivタグに囲まれたimgタグの画像が右寄せで表示されていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2023-11-26
作成日: 2023-11-25
