質問: ### 前提・実現したいこと ここに質問の内容を詳しく書いてください。 progateでhtml cssを学んでいます。 要素を重ね合わせることを学んでいたときのことです。画像にpタグのテキストを重ねるときのことです。 親要素にposition:relative;を指定して、子要素にposition:absolute;を指定しました。 そして、top:90pxとしたところまではいいのですが、そのあとleftを指定するのかと思ったら、width100%を指定しろと言われ、その通りにしたら、画像のちょうど真ん中にテキストが表示されました。 leftで左右の位置を指定するなら理解できるのですが、width100%でちょうど真ん中になる原理が理解できません。 なぜそうなるのか、教えてください。 html↓ HTML & CSS css↓ .lesson-icon { position: relative; } .lesson-icon p { position: absolute; top: 90px; width: 100%; color: white; } さらに広い部分のコードをコピペします。 html↓ Learn Where to Get Started! HTML & CSS css↓ .lesson-wrapper { height: 500px; padding-bottom: 80px; background-color: #f7f7f7; text-align: center; } .heading { padding-top: 60px; padding-bottom: 30px; color: #5f5d60; } .heading h2 { font-weight: normal; } .lesson { float: left; width: 25%; } .lesson-icon { position: relative; } .lesson-icon p { position: absolute; top: 90px; width: 100%; color: white; } さらに広い部分のコードをコピペしました。ひょっとして、lesson-wrapperのtext-align:center;が関係ありますか?しかし、width100%というコードを入力すると同時にプレビューでpタグのテキスト(HTML & CSS)がシュッと中央に寄りますので。。。よくわからないです。 (例)PHP(CakePHP)で●●なシステムを作っています。 ■■な機能を実装中に以下のエラーメッセージが発生しました。 ### 発生している問題・エラーメッセージ ``` エラーメッセージ ``` ### 該当のソースコード ``` ソースコード ``` ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: width100% は、横幅(width)をいっぱいいっぱい(可能な限度まで(100%))使って表示するという事ですから、結果としては左右のPaddingを除いた範囲に表示されます。 左右のPaddingの幅が同じなら、中央に表示されますよね。 もちろん、left: と right: で左右のPaddingの幅を異なる値にすると、表示は中央からずれます。