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 div s or span s with background image s) 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:

Answer 1

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

Answer 2

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> 

Answer 3

There are several ways to do so

1. Use margin-top to the current div

2. Use padding-top to the parent div

3. Use position:relative; top:__px; to the current div

4. Refer https://www.w3schools.com/css/css_align.asp

Hope it helps

Answer 4

Try:

.circle
{ 
    vertical-align: middle;
}

Answer 5

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>