Align elements vertically inside a div

Question

I'm trying to align elements vertically inside a div, but I'm stuck with circles. The red div is 100% width, with my code, but the vertical line does not show, and the circles (that are divs or spans with background images) are not in the middle.

My code:

.welcomeArea{
    margin-top: 70px;
    max-height: 98px;
    height: 98px;
    background-color: #293847;

}

.welcomeAreaContent{
        line-height: 98px;
        color: white;
        margin-left: 5%;
    margin-right: 5%;

}
.welcomeAreaContent > span {
    display:inline-block;
}
.welcomeAreaContent .welcomeName{
    font-weight: bold;
    font-size: 1.7em;
}
.verticalLine {
  border-left: thick solid #ff0000;
  content: "";
}


.circle { 
   width: 50px;
   height: 50px;
      border-radius: 50%;
    behavior: url(PIE.htc); 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
   margin-left: 32px;
   display: inline-block;
}
.twittericon{
    background: url('data:image/png;base64,...') no-repeat center;
    background-color: white;
     background-size: cover;   

}

<div class="welcomeArea">
<div class="welcomeAreaContent">
       <div class="welcomeName">
         TEXT TEXT
         <span class ="circle twittericon"></span>
       </div>
        <div class="verticalLine">
</div>
     </div>
  </div>

The result looks like the following which is not good at all:

Possible duplicate of [Vertically centering a div inside another div](https://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) — Junaid, Jul 04 '17 at 16:59

score 2 · Accepted Answer · answered Jul 04 '17 at 16:59

use display:flex

.welcomeAreaContent .welcomeName{
  font-weight: bold;
  font-size: 1.7em;
  display: flex;
  align-items: center;
}

.welcomeArea{
    margin-top: 70px;
    max-height: 98px;
    height: 98px;
    background-color: #293847;

}

.welcomeAreaContent{
        line-height: 98px;
        color: white;
        margin-left: 5%;
    margin-right: 5%;

}
.welcomeAreaContent > span {
    display:inline-block;
}
.welcomeAreaContent .welcomeName{
    font-weight: bold;
    font-size: 1.7em;
  display: flex;
    align-items: center;
}
.verticalLine {
  border-left: thick solid #ff0000;
  content: "";
}


.circle { 
   width: 50px;
   height: 50px;
      border-radius: 50%;
    behavior: url(PIE.htc); 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
   margin-left: 32px;
   display: inline-block;
}
.twittericon{
    background: url('data:image/png;base64,...') no-repeat center;
    background-color: white;
     background-size: cover;   

}

<div class="welcomeArea">
 <div class="welcomeAreaContent">
  <div class="welcomeName">
   TEXT TEXT
   <span class ="circle twittericon"></span>
  </div>
  <div class="verticalLine">
  </div>
 </div>
</div>

Here is the working Fiddle

LKG · Answer 2 · 2017-07-04T17:11:27.023

Update below css part use flex to get inline and vertically center

.welcomeAreaContent .welcomeName {
  font-weight: bold;
  font-size: 1.7em;
  display: flex; /*Add this*/      
  align-items: center; /*Add this*/
}

.welcomeArea {
  margin-top: 70px;
  max-height: 98px;
  height: 98px;
  background-color: #293847;
}

.welcomeAreaContent {
  line-height: 98px;
  color: white;
  margin-left: 5%;
  margin-right: 5%;
}

.welcomeAreaContent>span {
  display: inline-block;
}

.welcomeAreaContent .welcomeName {
  font-weight: bold;
  font-size: 1.7em;
  display: flex;
  align-items: center;
}

.verticalLine {
  border-left: thick solid #ff0000;
  content: "";
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  behavior: url(PIE.htc);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  margin-left: 32px;
  display: inline-block;
}

.twittericon {
  background: url('data:image/png;base64,...') no-repeat center;
  background-color: white;
  background-size: cover;
}

<div class="welcomeArea">
  <div class="welcomeAreaContent">
    <div class="welcomeName">
      TEXT TEXT
      <span class="circle twittericon"></span>
    </div>
    <div class="verticalLine">
    </div>
  </div>
</div>

Thank you, it seems solving my problem (no need to justify-content: center;) — Soufiane Tahiri, Jul 04 '17 at 17:05
Okay but in your question i have read this "and the circles (that are divs or spans with background images) are not in the middle." so i used `justify-content:center` — LKG, Jul 04 '17 at 17:08

score 0 · Answer 3 · answered Jul 04 '17 at 16:58

0

There are several ways to do so

Use margin-top to the current div
Use padding-top to the parent div
Use position:relative; top:__px; to the current div
Refer https://www.w3schools.com/css/css_align.asp

Hope it helps

answered Jul 04 '17 at 16:58

Amaan Iqbal

761
2
9
25

Thank you but padding/margins pushes "TEXT" also ! and cannot use relative because of other HTML elements – Soufiane Tahiri Jul 04 '17 at 17:05

score 0 · Answer 4 · answered Jul 04 '17 at 17:01

0

Try:

.circle
{ 
    vertical-align: middle;
}

answered Jul 04 '17 at 17:01

apocalypse

5,764
9
47
95

score 0 · Answer 5 · answered Jul 04 '17 at 17:04

You can align inline elements vertically using the vertical-align property.

.twittericon {
background: url(data:image/png;base64,...) no-repeat center;
background-color: white;
background-size: cover;
vertical-align: middle;
}

Otherwise if they are block elements, you can use flexbox.

<ul class="parent">
<li>2</li>
<li>1</li>
</ul>
<style>
.parent { display: flex; align-items: center; }
</style>

Align elements vertically inside a div

5 Answers5