中央揃えにならず、苦戦してます

isaraの模写の中央揃いにならない部分です。margin:0 auto;にしても変わりませんでした
.freedom{
background-image:url("/introbottom.jpg");
background-size:cover;
height:560px;
}
.txtbox{
width:860px;
max-width: calc(100% - 40px);
margin:0 auto;
position:relative;
}
.txtbox::before,.txtbox::after{
content'';
width:50px;
height:50px;
position:absolute;
display:inline-block;
box-sizing:border-box;
}
.textbox::before{
border-top:4px solid #EAB857;
border-left:4px solid #EAB857;
top:0;
left:0;
}
.textbox::after{
border-bottom:4px solid #EAB857;
border-right:4px solid #EAB857;
bottom:0;
right:0;
}
.freedom.txtbox.txt1{
padding:30px 0;
}

<div class="freedom"> <div class="txtbox"> エンジニアとして本当の自由を手に入れるには </div> <div class="freedom-text"> エンジニア需要の高まりに伴い、プログラミングスクールが増えています。 しかしそこでの学習の先は、提携して決められた就職先に就職すること。 これで本当にいいのですか？ 日本人エンジニアはアメリカと較べて給料が格段に低い。 その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。 スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。 そこで必要なのが 「稼ぐ力」です。

        </div>
    </div>

yambejp

2020/03/04 11:02

どこの何を中央揃えにするのでしょうか？（上下、左右？）

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

回答1件

ベストアンサー

margin:0 auto;はブロック要素を中央寄せする場合に使います。

テキストなどのインライン要素は、text-align: center;です。

css
1.freedom{
2  background-image:url("/introbottom.jpg");
3  background-size:cover;
4  height:560px;
5  text-align: center; /* 追加 */
6}

補足の解説

ちょっと説明不足でしたので、、、

text-align: center; を設定する要素はブロック要素ですが、
中央寄せの効果が効くのは設定したブロック要素ではなくその要素内のテキスト（インライン要素）です。
text-align という名前から想像がつくようにテキストの配置を決めるためのものですので、ブロック内のテキストの配置を決めるものです(右寄せ、左寄せ、両端揃え等)。

text-align - CSS: カスケーディングスタイルシート | MDN のサンプルの結果を見ると理解できると思います。

さらに、text-align は「継承あり」のプロパティなので親要素の設定を引き継ぎます。

.freedom に text-align: center; を設定するとその子孫ブロック要素の div, p要素にも引き継いで、その中のテキスト（インライン要素）にも適用されます。

margin:0 auto;は設定したブロック要素自体に効きます。
ブロック要素の左右余白を均等に分配するという意味になります。
ただし、Widthを設定しないと親要素の幅一杯に広がりますので左右余白はないので無意味になります。

投稿2020/03/04 11:54

編集2020/03/04 23:23

hatena19

総合スコア33782

lights

2020/03/04 20:43

回答ありがとうございます。質問なのですが、text-alignってブロック要素と書いてあるサイトとインライン要素と書いてるサイトがあってhttps://developer.mozilla.org/ja/docs/Web/CSS/text-align https://qiita.com/tekondo/items/abc1ddddb09879470496 ドットインストールではMDNが正しいってこと言われてて、今回のdiv,p要素もブロック要素だと思ってそこでわけわからなくなってます。解説お願いします