text-aligin:centerがきかない

「THINK」という文言をセンターに寄せたいと思い、text-aligin:centerがきかなくて困っています。
ネットで使い方を見ると、ブロック要素の中のインライン要素に適用できるという事だってので、
ブロック要素である、<div>タグ内に、インライン要素である,<span>タグのなかにTHINKを入れて親要素である

<div class="think">をtext-aligin:centerにしましたが、ききませんでした。文言は左よりになっています。なにかいい方法はございますでしょうか？

html
1<body>
2    <div class="wrapper">
3        <!-- headerのコンテンツはロックして背景は白にしてサイズ指定する。 リストは点を消して横並びにする-->
4        <header>
5            <!-- header-iamgeにバックグラウンドイメージで写真をつける。 -->
6            <div class="header-image">
7                <!-- ここから背景を白にしていく -->
8                <div class="white-var">
9                    <ul class="liquid-list">
10                        <!-- spanタグを使う場合はcss側でブロック要素に書き換える -->
11                        <li class="liquid-item"><img src="/img/logo/logo.png" art="コメント"></li>
12                        <li class="liquid-item">ABOUT US</li>
13                        <li class="liquid-item">OUR SPECIALTY</li>
14                        <li class="liquid-item">WORKS</li>
15                        <li class="liquid-item">COMPANY</li>
16                        <li class="liquid-item">RECRUIT</li>
17                    </ul>
18                </div>
19            </div>
20        </header>
21        <div class="center">
22            <div class="think"><span>THINK</span></div>←ここに適用させたい
23        </div>
24        <div class="footer-box">
25
26        </div>
27    </div>
28</body>
29
30</html>

css
1.think{ 
2    top: 1029px;
3    left: 4370px;
4    width: 84px;
5    height: 37px;
6    color: var(--unnamed-color-191e3f);
7    text-align: center;
8    font: normal normal bold 30px/37px Comfortaa;
9    letter-spacing: 0px;
10    color: #191E3F;
11    opacity: 1;
12}
13

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

回答1件

ベストアンサー

width: 84px; と狭い幅を設定してますので、その中での中央寄せになってます。
これを削除するか、ご希望の幅を設定してください。

投稿2021/01/27 13:55

hatena19

総合スコア33790

ingramzero

2021/01/28 00:35

回答ありがとうございます。真ん中に寄せる事ができました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

text-aligin:centerがきかない

関連した質問