6

htmlでdivの中の文字列を上下で中央にそろえるにはどうすればいいのでしょうか?
divの中に文字列があり、text-align: centerで左右は中央になったのですが上下で中央に揃えられません。

div#div1 {
  text-align: center;
  height: 400px;
  width: 600px;
  border: solid 1px;
  vertical-align: middle;
}
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Test html</title>
</head>

<body>
  <div id="div1">Hello</div>
</body>

</html>

3 件の回答 3

5

styleにdisplay: table-cell;を追加します。
(※css3)

2

最近のブラウザだと、 flexbox を使う、という選択肢もありそうです。

参考: https://stackoverflow.com/a/22218694/3090068

div#div1 {
  height: 150px;
  width: 200px;
  border: solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="div1">Hello</div>

0

わたしも初心者なので最適解はわかりませんが、
同じ悩みを以下の方法で解決しました。
ご参考まで。

文字列をpタグでくくり、

div#div1 p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

でいかがでしょうか。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。