My goal was to vertically center two divs within the header section of my website. Here is the code I used:
<header>
<div class="block">
<div class="left">
<ul>
<li>Home page link</li>
<li>Music page link</li>
<li>Contact page link</li>
</ul>
</div>
<div class="right">
<ul>
<li> Facebook icon code</li>
<li> Twitter icon code</li>
<li> YouTube icon code</li>
<li> PayPal donate button code</li>
</ul>
</div>
</div>
</header>
I also included CSS to achieve this:
.block {
width: 100%;
height: 90px;
}
/* ghost element */
.block:before {
content: '';
display: inline-block;
height = 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.right, .left {
display: inline-block;
vertical-align: middle;
}
.right {right: 0;}
.left {left: 0;}
.right li, .left li {
display: inline-block;
}
.left li {
font-size: 48px;
margin-left: 12px;
letter-spacing: -4.5px;
text-transform: uppercase;
}
The source for this code can be found at:
http://css-tricks.com/centering-in-the-unknown/
While the code successfully centers one div, I encountered difficulties in getting two divs aligned properly. The current setup has them positioned next to each other on the right side:
Despite reading up on coding and attempting various solutions, I struggled with this seemingly simple problem. Is it possible to align the div with class "right" on the right and the div with class "left" on the left within the ghost element framework?