Struggling to vertically align elements within a div, especially circles. The red div is set to 100% width with my code, but the issue lies in the vertical alignment and positioning of the circles (essentially divs or spans with background images).
https://i.sstatic.net/lrArg.jpg
Here's 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 end result looks like this: https://i.sstatic.net/vBVrx.png