divの中央寄せ

DIVの中央寄せができません。textalignではないのでしょうか？

HTML
1<div>
2  <div>tetetestestes</div>
3</div>

行動規範の内容に同意します

回答3件

ベストアンサー

text-alignプロパティはインライン要素に使い、divなどブロックレベル要素には使用できません。
div要素を中央寄せすることは以下のように実現できます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #box1 {
13            width: 100%;
14            background-color: black;
15        }
16
17        #box2 {
18            display: table;
19            margin: 0 auto;
20            width: 360px;
21            height: 500px;
22            background-color: gray;
23        }
24    </style>
25</head>
26<body>
27<div id="box1">
28    <div id="box2">テキスト</div>
29</div>
30</body>
31</html>

投稿2017/03/02 10:35

s8_chu

総合スコア14731

flexを覚えるのもいいと思います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>temp1</title>
    <style media="screen">
      .c1 {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="c1">
      <div class="c2">
        texttexttext
      </div>
    </div>

  </body>
</html>

投稿2017/03/02 10:47