画像と文章を半々で並べたい

Question

HTMLとCSSでホームページを作成しています。
画像と文章が横並びになり、それを3つ縦に並べる配置に苦戦しています。
「決められた幅の中に、50％写真と50％の文章エリアを配置」×３
をするイメージです。
全体の幅は指定しました（下記boxクラスを1000px)

そして文章は真ん中に配置するイメージです。
marginでpx指定するのではなく、自動で縦方向の真ん中に配置したいです。
使用している画像のwidthは全体幅の6割ほどの大きさです。
heightは特に指定していないので、widthの比率に合わせたいです。

-----HTML--------

<div class="box"> <div class="about"> <div class="aboutimg"><img src="img/winery.jpg" alt=""></div> <div class="abouttext"> <h1>ワイナリー</h1> <p>素敵なワイナリーで私服のひと時を！</p> </div> </div> </div> ------CSS-------- .box{ width: 1000px; }

.about{
display: flex;
}

.aboutimg{
flex: 1;
}

.abouttext{
margin-right: 120px;
margin-left: 50px;
align-items: center;
flex: 1;
}

・「margin-left: 50px;」にて縦方向の真ん中に配置、
・「flex: 1;」を画像と文章のdivに設定することで各々50％の配置にする
つもりでしたが、効いてくれません。
（widthで画像のdivを50％にしても上手くいきませんでした。）

どう改善すればよいのでしょうか？
また、上記が良くない理由も教えていただけたら助かります。

●完成イメージ

よろしくお願いいたします。

Answer 1

img/winery.jpgの幅が600pxだと仮定すると、それに合わせて左側のdivの幅が伸びるので、半々には、なりませんね。

例えば、img要素にwidth:100%を付ければ、ひとまず半々になります。

.aboutimg > img {
    width: 100%;
}

↑このスクショでは、分かりやすいように、幅1000pxの.boxに境界線を付け、.abouttextに背景色を付けています。

しかし、このままだと、.abouttextの左右にマージンが設定されているので、恐らく理想とは違いますよね?

少しHTMLを変更しても良いなら、.abouttextの内側にdivを追加して、そのdivへマージンを設定する、という手があると思います。

<div class="abouttext">
    <div>
        <h1>...</h1>
        <p>...</p>
    </div>
</div>

.abouttext > div {
    margin-right: 120px;  /* .abouttextから移動 */
    margin-left: 50px;    /* .abouttextから移動 */
}

↓こうなります。

Comments

[TiffanyM]

ご回答ありがとうございます。
なるほど！下に一つdivを追加してそこでmarginを設定するんですね！
助かりました。