CSS・画像の中央配置を教えていただきたいです。
Q&A
Closed
解決したいこと
CSSで画像の中央配置が上手くできません…。
#cotents の内部にある.contents-imageと.contents-textを中央揃えのwidth50％でそれぞれ配置したいです。
#contents .contents-textの中に「padding: 0 7%」を記述すると、どうしても50%というものが崩れてしまいます。
お力添えいただけると幸いです。
本当に初心者で何もわからず、申し訳ないです…。
現状のコード（HTML）
<main class="container">
<!--contents-->
<div id="contents">
<div class="contents-image">
<img src="img/concept.jpg" alt="">
</div>
<div class="contents-text">
<h2 class="title">私たちの考えるジュエリーとは</h2>
<p class="sub-title">Concept</p>
<p>シンプルで美しい雑貨を作ります。日常に溶け込むような、優しい感覚のジュエリーが一番ですね。</p>
</div>
</div>
<div id="contents">
<div class="contents-text">
<h2 class="title">ハンドメイドにこだわる理由</h2>
<p class="sub-title">work</p>
<p>身体に優しく、自然体になじむジュエリーを目指して制作しています。皆さんの丁寧な生活に添えて。</p>
</div>
<div class="contents-image">
<img src="img/work.jpg" alt="">
</div>
</div>
</main>
現状のコード（CSS）
.container {
max-width: 1000px;
margin: 0 auto;
}
#contents {
margin-bottom: 60px;
display: flex;
justify-content: center;
align-items: center;
}
#contents .contents-text {
width: 50%;
padding: 0 7%;
}
#contents .contents-image {
width: 50%;
}
現状の実装画面
目的の実装画面
0 likes
