Using flex align-items center to vertically center text inside div

1
votes

I can't figure out what I have wrong with my css. I would think this would vertically center the text inside this div:

.content-bar {
  height: 60px;
  background: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #ececec;
}
.content-bar-content {
  display: flex;
  align-items: center;
}
<div class="content-bar">
  <div class="content-bar-content">
    Testing 123
  </div>
</div>

However, the text is lining up to the top of the div. What am I missing?

See codepen: https://codepen.io/anon/pen/xgOwwp

5
htmlcssflexboxheight
Move height to .content-bar-content. - Mohammad Usman
@MuhammadUsman Thank you, I had no idea this was affecting it. The only thing I see now is that the 1px bottom border appears much thicker now- about 3px. Do you know why? - MultiDev
Well, In my chrome 55 its working fine. I can see only 1px border. - Mohammad Usman
@MuhammadUsman Thank you for your help - MultiDev

5 Answers

0
votes

You can specify the content-bar as a flexbox like below:

.content-bar {
  height: 60px;
  background: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #ececec;
  display: flex;
  align-items: center;
}
.content-bar-content {}
<div class="content-bar">
  <div class="content-bar-content">
    Testing 123
  </div>
</div>

Or you can inherit the height of the content-bar - just add height: inherit on content-bar-content - see demo below:

.content-bar {
  height: 60px;
  background: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #ececec;
}
.content-bar-content {
  display: flex;
  align-items: center;
  height: inherit;
}
<div class="content-bar">
  <div class="content-bar-content">
    Testing 123
  </div>
</div>
0
votes

check with the demo , i have swap the height

.content-bar {
  
  background: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #ececec;
}
.content-bar-content {
    display:flex;
    align-items:center;
    height: 60px;
}
<div class="content-bar">
  <div class="content-bar-content">
    Testing 123
  </div>
</div>
0
votes

All of your CSS must be declared in your parent container. Here is an example to center both horizontally and vertically:

.content-bar {
  height: 80px;
  background: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #ececec;
  display:flex;
  align-items:center;
  justify-content: center;
}
<div class="content-bar">
  <div class="content-bar-content">
    Testing 123
  </div>
</div>

Hope this helps!

0
votes

Add height to both classes and addvertical-align: middle to content 

.content-bar {
  height: 60px;
  background: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #ececec;
  height:100%
}
.content-bar-content {
    height:100%;
    display:flex;
    align-items:center;
   vertical-align: middle;
}
<div class="content-bar">
  <div class="content-bar-content">
    Testing 123
  </div>
</div>
0
votes

Try this simple code to align text in center of the div remove fixed height and give padding

.content-bar {
  padding:30px;
  height:auto;
  background: #f7f7f7;
  overflow: hidden;
  border-bottom: 1px solid #ececec;
}
.content-bar-content {
    display:flex;
    text-align:center;
}
<div class="content-bar">
  <div class="content-bar-content">
    Testing 123<br/> Testing 123<br/> Testing 123<br/> Testing 123<br/>
  </div>
</div>