Question

我试图让H2元素充满＆＃34;投资组合＆＃34;以2 img元素为中心。我这样做有困难。现在，它被卡在2 .col-md-4引导列的左侧。你能指出我正确的方向吗？

以下是代码：

<div class="portf row">
  <h2>Portfolio</h2>

  <div class="portfolio col-md-4">

    <img class="port1 img-responsive" src="https://s8.postimg.org/v4ol85ct1/hangman.jpg">
    <p>A game of hangman made with: HTML, CSS, and JavaScript.</p>

  </div>
  <div class="col-md-4 img-responsive"><img src="https://s8.postimg.org/3kagp7ctx/BFSkinner.jpg" alt="pic 2">
    <p>A B.F. Skinner tribute page made with: HTML and CSS.</p>
  </div>
</div>

Answer 1

display:flex类上的row样式导致此问题。添加以下CSS应该可以解决当前的问题：

.portf {
  display: block;
}

您可能想在display:flex课程中使用row重新考虑。通过向col-md-8列添加col-md-offset-2类，可以简化大部分CSS并使其居中。

Answer 2

您必须先删除行类。然后对两个图像div使用col-md-6类。希望这会对你有所帮助。

 <div class="portf">
      <h2>Portfolio</h2>

      <div class="portfolio col-md-6">
        <img class="port1 img-responsive" src="https://s8.postimg.org/v4ol85ct1/hangman.jpg">
        <p>A game of hangman made with: HTML, CSS, and JavaScript.</p>
      </div>
      <div class="col-md-6 img-responsive">
        <img src="https://s8.postimg.org/3kagp7ctx/BFSkinner.jpg" alt="pic 2">
        <p>A B.F. Skinner tribute page made with: HTML and CSS.</p>
      </div>
    </div>

H2元素问题

2 个答案: