前提・実現したいこと
画像の右側に文字を配置し、それらを画面中央に配置したいです。
発生している問題
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>
「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
ブラウザ:クローム