Codejumpさんの問題が難しいです。
解決したいこと
https://code-jump.com/demo/html/store1/
上記のようなサイトを練習として作っているのですが、cssがわかりません。
現在はこのように、画像とテキストが左右に離れてしまっています。
画像とテキストをどうしたらセンターに寄せられるか、sec-titleとpをずらしたくない。
お願いします。
今はこんな感じで書いています。
HTML
<section class="catalog-antique">
<div class="flex-item">
<div class="item">
<img src="img/catalog.jpg" alt="catalog">
</div>
<div class="item">
<h2 class="sec-title">Catalog</h2>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
</section>
<section class="catalog-antique">
<div class="flex-item">
<div class="item">
<h2 class="sec-title">Antique</h2>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<a class="btn" href="#">Read more</a>
</div>
<div class="item">
<img src="img/antique.jpg" alt="antique">
</div>
</div>
</section>
CSS
.catalog-antique {
background-color: #f5f5f5;
padding: 60px 0;
}
.catalog-antique .sec-title {
margin-bottom: 40px;
}
.catalog-antique .flex-item {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.catalog-antique .item {
width: 48%;
text-align: center;
}
.catalog-antique .item img {
max-block-size: 500px;
}
.catalog-antique .item p {
margin-bottom: 30px;
text-align: left;
max-width: 501px;
}
.catalog-antique .item p:last-child {
margin-bottom: 0;
}
0 likes
