XHTML5の2列レイアウトにイメージを配置しようとしています

Question

私はXHTML5のルールとCSSを使っています。何らかの理由で私のテキスト（ここではほとんど無関係にカットされています）がイメージをラッピングしています。私が欲しいのは、イメージを中心にして、それらの下にテキストを並べて、2つの列が並んでいることです。ここで

は私のコードです：

<section> 
    <h1>The Beasts</h1> 

    <p>text here</p> 

    <div class="flexbox"> 
     <div class="flexside"> 

      <figure class"beast"><img src="images/tonka.jpg" alt="Tonka, the old man." /></figure> 
      <p>text here</p> 

      <p>text here</p> 
     </div> 
     <div class="flexside"> 

      <figure class="beast2"><img src="images/storm.jpg" alt="Storm, our Gangster Princess" /></figure>    
      <p>text here</p> 

      <p>text here</p> 
     </div> 
     <div class="flexside"> 

      <figure class="beast"><img class="cats" src="images/banshee.jpg" alt="Deafbat aka Banshee" /></figure> 

      <p>text here</p> 

      <p>text here</p> 

      <p>text here</p> 
     </div> 
     <div class="flexside"> 

      <figure class="beast2"><img class="cats" src="images/squiggle.jpg" alt="Mr Squiggle, the man from the Moon." /></figure> 

      <p>text here</p> 

      <p>text here</p> 

      <p>text here</p> 
     </div> 
    </div> 
    <img src="images/kittens.jpg" alt="The kittens, Rumple and Mungo." /> 
    <p>text here</p> 

    <p>text here</p> 

    <p>text here.</p> 

    <p>text here</p> 
</section> 

そして、ここでは、CSSです：

.flexbox { 
    display: -webkit-flex; 
    display: flex; 
    flex-wrap: wrap; 
} 

.flexside { 
    width: 50%; 
    display: inline-block; 
} 

p { 
    padding-left: 20px; 
    padding-right: 20px; 
} 

figure.beast { 
    margin: auto; 
    text-align: center; 
} 

figure.beast2 { 
    display: block; 
    margin: 0 auto; 
} 

img.cats { 
    height: 233px; 
    width: 350px; 
} 

Answer 1

あなたがここにコンテナクラスのflexboxを使用しているとして、あなたが使用して、内側の箱を中心に自分自身を曲げる使用することができます。

.flexside { 
    width: 50%; 
    display: inline-flex; 
    border: 1px solid; 
    box-sizing: border-box; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
} 

画像にボックスの幅が含まれるように、私は：

img{ 
    display: block; 
    max-width: 100%; 
} 

注：.figure .beastと.figure .beast2からmargin: autoを削除します。

これをチェックしてフィードバックをお送りください。ありがとう！

.flexbox { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flexside { 
 
    width: 50%; 
 
    display: inline-flex; 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
img{ 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
p { 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 
figure.beast { 
 
    text-align: center; 
 
} 
 
figure.beast2 { 
 
    display: block; 
 
} 
 
img.cats { 
 
    height: 233px; 
 
    width: 350px; 
 
}

<section> 
 
    <h1>The Beasts</h1> 
 

 
    <p>text here</p> 
 

 
    <div class="flexbox"> 
 
    <div class="flexside"> 
 

 
     <figure class "beast"> 
 
     <img src="http://placehold.it/100x100" alt="Tonka, the old man." /> 
 
     </figure> 
 
     <p>text here</p> 
 

 
     <p>text here</p> 
 
    </div> 
 
    <div class="flexside"> 
 

 
     <figure class="beast2"> 
 
     <img src="http://placehold.it/100x100" alt="Storm, our Gangster Princess" /> 
 
     </figure> 
 
     <p>text here</p> 
 

 
     <p>text here</p> 
 
    </div> 
 
    <div class="flexside"> 
 

 
     <figure class="beast"> 
 
     <img class="cats" src="http://placehold.it/100x100" alt="Deafbat aka Banshee" /> 
 
     </figure> 
 

 
     <p>text here</p> 
 

 
     <p>text here</p> 
 

 
     <p>text here</p> 
 
    </div> 
 
    <div class="flexside"> 
 

 
     <figure class="beast2"> 
 
     <img class="cats" src="http://placehold.it/200x200" alt="Mr Squiggle, the man from the Moon." /> 
 
     </figure> 
 

 
     <p>text here</p> 
 

 
     <p>text here</p> 
 

 
     <p>text here</p> 
 
    </div> 
 
    </div> 
 
    <img src="http://placehold.it/100x100" alt="The kittens, Rumple and Mungo." /> 
 
    <p>text here</p> 
 

 
    <p>text here</p> 
 

 
    <p>text here.</p> 
 

 
    <p>text here</p> 
 
</section>