質問: ### 前提・実現したいこと 画像の右側に文字を配置し、それらを画面中央に配置したいです。 ### 発生している問題 floatを使って画像の右側に文字を配置したいのですが、文字が右端に行ってしまいます。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/fab53a063e3e135d667f80cf23d6ab42.png) ### 該当のソースコード 「HTML」 section class="feature"> すごい特徴があるよ! 色々ありますよ。色々ありますよ。色々ありますよ。色々ありますよ。色々ありますよ。 「css」 .feature h1{ font-weight: normal; font-size: 18px; } .feature .desc{ width: 360px; } .feature .desc{ float: right; padding-left: 40px; } .feature:not(:last-child){ margin-bottom: 60px; } .feature{ overflow: hidden; text-align: center; } ### 補足情報(FW/ツールのバージョンなど) IDE:Web storm ブラウザ:クローム
回答: 文章が右に寄る理由は、 文章を囲っている.descクラスにfloat: right;を指定しているためです。 もし画像のすぐ右に文章を回りこませたいのであれば ### 修正前 ``` .feature .desc { float: right; } ``` ### 修正後 ``` .feature img ,.feature .desc { float: left; } ``` に追加修正すれば実装できると思います。 文章だけをfloatすると画像を飛び越えてしまうので、 画像も一緒にfloatすることがポイントです。 最初はfloatの扱いに困ることがたくさんあると思いますので、 動きについてはよく調べてい見ると今後やくにたつと思います。 私は以下のようなサイトで理解できましたので、 ぜひ参考にしてみてください http://taneppa.net/float/