パディングがすぐに浮動しているときに、どうすれば使用できますか？

Question

私は、左の余白に1つ、右の余白に1つ、2つの画像を持っています。私は2つの要素を中央に合わせるように中央に配置したいと思います。

しかし、私が右に持っているボックスが左に揃うように浮いているので、私のパッディング権はそれを押しても機能しません。ここで

I want to center these two things

は私のコードです：

<section id="content1"> 
    <a href="#"><img src="images/matcha.jpg" alt="pic1" width="300" height="300" /></a> 

    <div class="box1"> 
    <div class="heading1"> 
     <p>GREEN TEA LOVE</p> 
    </div> 

    <div class="paragraph1"> 
     <p>Top Impression Bakery Cafe has been on my go-to list for awhile since I saw their 
     Green Tea Croissant on Instagram. If you know me well you would know that I'm a huge 
     fan of anything Matcha and if anything is Matcha related I've got to try it!</p> 
    </div> 
    </div> 
</section> 

CSS：

#content1{ 
    padding-top:50px; 
    padding-bottom:30px; 
    width: 960px; 
} 

.box1{ 
    width:500px; 
    height:300px; 
    background:-moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
    border-style:solid; 
    float:right; 
} 

Answer 1

私はあなたが「左に整列するために、右のボックスをフロートする必要がある理由はよく分かりません1"。イメージ上でvertical-alignを使用すると、それらを垂直に整列させることができます。それらを中央に配置するには、text-align: centerを#content1に追加するだけです。 https://jsfiddle.net/8gkcguwb/1/を参照してください。

Answer 2

#contentと.box1の両方の要素を試しましたか？

margin 0 auto;

Answer 3

親コンテンツセクションのタグにflexboxを使用して、ボックス上の浮動を削除します。 justify-contentルールをスペース・アラウンドに変更すると、親の幅に基づいて配布することができます。また、ウィンドウのサイズが変更された場合に折り返すためのフレックス・ラップも可能です。

#content1{ 
 
    padding-top:50px; 
 
    padding-bottom:30px; 
 
    width: 100%; 
 
    max-width: 960px; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
.box1{ 
 
    width:500px; 
 
    height:300px; 
 
    background:-moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
 
    border-style:solid; 
 
    
 
}

<section id="content1"> 
 
    <a href="#"><img src="https://placehold.it/300x300" alt="pic1" width="300" height="300" /></a> 
 

 
    <div class="box1"> 
 
    <div class="heading1"> 
 
     <p>GREEN TEA LOVE</p> 
 
    </div> 
 

 
    <div class="paragraph1"> 
 
     <p>Top Impression Bakery Cafe has been on my go-to list for awhile since I saw their 
 
     Green Tea Croissant on Instagram. If you know me well you would know that I'm a huge 
 
     fan of anything Matcha and if anything is Matcha related I've got to try it!</p> 
 
    </div> 
 
    </div> 
 
</section>

Fiddle