Question

我有一个非常基本的结构，如此

<section id="portfolio">
    <div class="col-lg-5 col-sm-5 vertical-center" id="portfolio-left">
        <div id="portfolio-title">
            <h2>Work</h2>
        </div>
    </div>

    <div class="col-lg-7 col-sm-7" id="portfolio-right">
        <div class="swiper-slide goldBG" id="cSlide2">
            <div class="col-md-6 col-md-offset-3 vertical-center" id="inner">
                <h3>Some title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>           
    </div>
</section>

它有左侧部分和右侧部分。现在我希望这些部分中的内容在中间垂直对齐，所以我第一次使用flex

.vertical-center {
    align-items: center;
    display: flex;
}

这很有效，你可以从JSFiddle看到我遇到的问题是正确的部分。你可以看到它是垂直对齐的，但是，里面的项目（h3和p）似乎是内联对齐的。

有什么方法可以让这些项目显示为一个块？我尝试了一些这样做的事情，但随后它弄乱了我的垂直对齐。

任何建议表示赞赏。

由于

Answer 1

让你inner div 列 flexbox：

#inner {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

见下面的演示：

#portfolio {
  height: 100vh;
}
section#portfolio {
  padding-bottom: 0;
  padding-top: 0;
}
#portfolio-right {
  height: 100%;
  padding: 0;
}
#cSlide2 {
  height: 350px !important;
}
#cSlide2 #inner {
  height: 100%;
}
.vertical-center {
  align-items: center;
  display: flex;
}
#portfolio-right .goldBG {
  background: #fabc2f;
}
#portfolio-left {
  height: 100%;
  background: #35a887;
}
#inner {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

<section id="portfolio">
  <div class="col-lg-5 col-sm-5 vertical-center" id="portfolio-left">
    <div id="portfolio-title">
      <h2>Work</h2>
    </div>
  </div>

  <div class="col-lg-7 col-sm-7" id="portfolio-right">
    <div class="swiper-slide goldBG" id="cSlide2">
      <div class="col-md-6 col-md-offset-3 vertical-center" id="inner">
        <h3>Some title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</section>

Answer 2

放置<h3>＆amp;父<p>内的<div>（在我的情况下为.content-holder）。因为它的属性是flex来内联项目。

像：

<div class="content-holder">
  <h3>Some title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

您也可以使用flex-direction: column，但这会使您的每个内容换行到下一行，因此最好将它们包装到父div中。

请看下面的代码段：

＆＃13;

#portfolio {
    height:100vh;
}

section#portfolio {
    padding-bottom: 0;
    padding-top: 0;
}

#portfolio-right {
    height: 100%;
    padding: 0;
}

#cSlide2 {
    height:350px !important;
}

#cSlide2  #inner {
    height:100%;
}

.vertical-center {
    align-items: center;
    display: flex;
}
#portfolio-right .goldBG {
    background: #fabc2f;
}

#portfolio-left {
    height:100%;
    background: #35a887;
}

＆＃13;

<section id="portfolio">
    <div class="col-lg-5 col-sm-5 vertical-center" id="portfolio-left">
        <div id="portfolio-title">
            <h2>Work</h2>
        </div>
    </div>

    <div class="col-lg-7 col-sm-7" id="portfolio-right">
		<div class="swiper-slide goldBG" id="cSlide2">
			<div class="col-md-6 col-md-offset-3 vertical-center" id="inner">
              <div class="content-holder">
				<h3>Some title</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
					laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
			</div>
		</div>           
    </div>
</section>

＆＃13;

希望这有帮助！

Flexbox对齐内容

2 个答案: