画像の右に文字を配置し、画面中央にそれらを配置する方法がわかりません。

Question

前提・実現したいこと

画像の右側に文字を配置し、それらを画面中央に配置したいです。

発生している問題

floatを使って画像の右側に文字を配置したいのですが、文字が右端に行ってしまいます。

該当のソースコード

「HTML」
section class="feature">
<img class="pc" src="image/feature1.png" width="420" height="270" alt="特徴1の画像">
<div class="desc">
<h1>すごい特徴があるよ！</h1>
<p>色々ありますよ。色々ありますよ。色々ありますよ。色々ありますよ。色々ありますよ。</p>
</div>

</section>

「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
ブラウザ:クローム

Comments

[yoshinavi]

各コードは、ヘルプ等を参照して、コードブロックで提示してください。回答者が問題点を把握・参照しやすくなり、より多くの回答が得れるかと思います。

レイアウトが上手くいかない場合、各要素に背景色を設定すると、どのような大きさになっているのかが分かりやすくなります。

基本的な部分は「wanderer」さんや「LibertyBell3」さんの回答のとおりかと思います。

floatの性質を再確認することはもちろん、CSSの記述順も気を付けると（親要素→子要素の順で記述する）、動作の打消しが生じにくくなり、確認もしやすくなるかと思います。

Answer 1

.feature {
  display:flex;
  flex-wrap:nowrap;/*いらないかも*/
  justify-content:center;
}
.desc {
  /*float: right;*/
  /*padding-left: 40px;*/
  margin-left:40px;
}

でいけませんか？

Answer 2

文章が右に寄る理由は、
文章を囲っている.descクラスにfloat: right;を指定しているためです。

もし画像のすぐ右に文章を回りこませたいのであれば

修正前

.feature .desc {
  float: right;
}

修正後

.feature img
,.feature .desc {
  float: left;
}

に追加修正すれば実装できると思います。

文章だけをfloatすると画像を飛び越えてしまうので、
画像も一緒にfloatすることがポイントです。

最初はfloatの扱いに困ることがたくさんあると思いますので、
動きについてはよく調べてい見ると今後やくにたつと思います。

私は以下のようなサイトで理解できましたので、
ぜひ参考にしてみてください

http://taneppa.net/float/