0

I wanted to vertically center two divs in the header of my site. Here is the code:

        <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>

And the CSS:

.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;
}

This was taken from:
https://stackoverflow.com/a/15304578/1491212
http://css-tricks.com/centering-in-the-unknown/

The code works insofar as it vertically centers the divs. However, the examples discuss only one div to be vertically centered. I want two div's to be vertically centered with one aligned left and the other aligned right. Right now, they are sitting next to each other aligned right:

enter image description here

I'm new to coding and I've done as much reading as I could before coming here; however, I was unable to fix this (probably) simple problem. So, do I get the div class=right and div class=left to the right and left within the strange ghost element framework?

Community
  • 1
  • 1
Michael Pitluk
  • 77
  • 4
  • 13
  • Possible duplicate of [Align two inline-blocks left and right on same line](http://stackoverflow.com/questions/10272605/align-two-inline-blocks-left-and-right-on-same-line) – sergdenisov Oct 10 '15 at 20:43

2 Answers2

4

Maybe this can help you somehow?

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

It's about using text-align: justify;

Oussama el Bachiri
  • 18,687
  • 3
  • 15
  • 22
  • I think this is the way to go. So thanks for the link. However, I have net yet gotten it to work exactly right quite yet. As soon as I do, I will selected this as my answer. Great articles. I spent this morning reading all of them. – Michael Pitluk Jul 16 '13 at 01:08
0

Try this,.. replace with your style

.right {float : right;}
.left {float: left;}
Gaurav Gandhi
  • 3,041
  • 2
  • 27
  • 40
  • 1
    I tried something similar to this, but it just undoes the vertical alignment, which brings me back to the original mystery. I can't seem have vertical centering with right and left alignment. – Michael Pitluk Jul 15 '13 at 11:28