12887


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

[code]

    div#div1 {
      text-align: center;
      height: 400px;
      width: 600px;
      border: solid 1px;
      vertical-align: middle;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
      <meta charset="utf-8">
      <title>Test html</title>
    </head>
    
    <body>
      <div id="div1">Hello</div>
    </body>
    
    </html>
[/code]


CC BY-SA 3.0
2015-07-31T12:16:25.070
12886
2020-01-26T03:57:29.493
5246
question
html css html5
<div>の中の文字列を上下で中央に揃える


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


CC BY-SA 3.0
2015-07-31T12:23:49.690
12887
2015-07-31T12:23:49.690
5044
12886
answer


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

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

[code]

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

でいかがでしょうか。


CC BY-SA 3.0
2015-08-15T16:28:19.907
14450
2015-08-15T16:33:04.480
2015-08-15T16:33:04.480
5337
10928
12886
answer


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

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

[code]

    div#div1 {
      height: 150px;
      width: 200px;
      border: solid 1px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
[/code]

[code]

    <div id="div1">Hello</div>
[/code]


CC BY-SA 4.0
2019-08-01T13:43:37.630
57110
2020-01-26T03:57:29.493
2020-01-26T03:57:29.493
32986
754
12886
answer