906 views
この記事は最終更新から 1385日 が経過しています。
1. やりたいこと
DIV矩形内に配置した複数行のテキストを、縦方向の中断に寄せたい。
2. やってみる
1) 縦方向中寄せ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>
<style>
.v_mid{
/* 中寄せの指定 */
position: absolute;
margin: 0;
top: 50%;
transform: translateY(-50%);
/* 以下、不要な装飾 */
font-size: 20pt;
color: #00f;
}
</style>
</head>
<body>
<div style="position:relative; height: 500px; border: solid 5px #000">
<p class="v_mid">
あいうえお<br />
かきくけこ<br />
さしすせそ
</p>
</div>
</body>
</html>
解説
・10行目～13行目 : 縦方向中断寄せのための設定
2) 横方向中寄せ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>
<style>
.h_mid{
/* 中寄せの指定 */
position: absolute;
margin: 0;
left: 50%;
transform: translateX(-50%);
/* 以下、不要な装飾 */
font-size: 20pt;
color: #00f;
}
</style>
</head>
<body>
<div style="position:relative; height: 500px; border: solid 5px #000">
<p class="h_mid">
あいうえお<br />
かきくけこ<br />
さしすせそ
</p>
</div>
</body>
</html>
解説
・10行目～13行目 : 横方向中断寄せのための設定
3) 縦方向＆横方向中寄せ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>
<style>
.vh_mid{
/* 中寄せの指定 */
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/* 以下、不要な装飾 */
font-size: 20pt;
color: #00f;
}
</style>
</head>
<body>
<div style="position:relative; height: 500px; border: solid 5px #000">
<p class="vh_mid">
あいうえお<br />
かきくけこ<br />
さしすせそ
</p>
</div>
</body>
</html>
解説
・10行目～14行目 : 横方向中断寄せのための設定
・14行目は以下のようにまとめて書くことも出来る。
transform: translate3d(-50%, -50%, 0);
4) 縦方向＆横方向中寄せ （画像でも）
当然だが、表示物がテキストでなく画像でも使える。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>
<style>
.vh_mid{
/* 中寄せの指定 */
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div style="position:relative; height: 500px; border: solid 5px #000">
<img class="vh_mid" src="./svgimg1.svg" style="width: 30%;" />
</div>
</body>
</html>
3. 所感
・このコードはちょくちょく使うことになりそうだなぁ…