Flexbox align content - html

Question

I have a pretty basic structure like so
<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>
It has a left section and a right section. Now I wanted the content within these section to be vertically aligned in the middle, so I used flex for the first time
.vertical-center {
align-items: center;
display: flex;
}
This works well as you can see from the JSFiddle The problem I am having is with the right section. You can see that it is vertically aligned correctly, however, the items (h3 and p) inside seem to be aligned inline.
Is there any way I can get these items to display as a block? I have tried a few things that do this, but then it messes up my vertically alignment.
Any advice appreciated.
Thanks

Answer 1

Make you inner div a column flexbox:
#inner {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
See demo below:
#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

Put your <h3> & <p> inside a parent <div> (in my case its .content-holder). Because its the property to flex to inline the items.
Like:
<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>
You can use flex-direction: column too but this will make each of your content wrap to next line, so its better to wrap these into a parent div.
Have a look at the snippet below:
#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;
}
<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>
Hope this helps!