Question

所以我正在使用XHTML5规则和CSS，由于某种原因，我的文本（这里大部分都被视为无关紧要）围绕着我的图像。我想要的是两列并排，图像居中，文字在它们下面。

这是我的代码：

<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作为容器类时，您可以使用flex本身使用以下内容使内部框居中：

.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%;
}

同时从margin: auto和.figure .beast移除.figure .beast2。见下面的演示：

.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>

以2列布局居中图像

1 个答案: