CODEWITHSUNDEEP
htmlcssflexbox
archytect
archytect

Reputation: 3715

using flexbox to vertical align text

flexbox should make things a lot simpler it seems, but I can't seem to get the text links and images in this menu to align vertically. The text links and images are centered vertically and horizontally instead. What's missing? I'm probably also over doing it as if I were using tables and vertical-align. I want everything to align to the bottom.

* {
    padding: 0;
    margin: 0;
}

header > div {
    display: flex;
    position: relative;
}

header > div > a {
    border: solid 1px #000;
    float: left;
    align-self: flex-end;
    height: 279px;
    line-height: 279px;
}

header > div > ul {
    border: solid 1px #000;
    float: left;
    align-self: flex-end; 
    height: 279px;
    line-height: 279px;
}

header .menu li {
    display: inline-block;
    float: left;
    height: 279px;
    line-height: 279px;
}

header .menu li a {
    display: block;
    align-self: flex-end;
height: 279px;
line-height: 279px;
}

    <header>
        <div>
            <a href="#">
                <img src="http://eu2013.ie/media/eupresidency/content/imagegalleryitems/twitter-bird-blue-on-white-small.png" />
            </a>
            <ul class="menu">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li style="background: url('http://printready.co/wp-content/uploads/2012/08/facebook-like-icon-300x279.png') no-repeat; width: 300px; height: 279px;"></li>
            </ul>
        </div>
    </header>

https://jsfiddle.net/rpbwdvxe/1/

Upvotes: 0

Views: 229

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Set flex on header > div's children, and align-self on its grandchildren:

header > div {
  display: flex;
}

header > div > * {
  display: flex;
}

header > div > * > * {
  align-self: flex-end;    
}

Working Fiddle

Upvotes: 1

Ibrahim Badusha
Ibrahim Badusha

Reputation: 152

Try this 

header > div > a {
border: solid 1px #000;
float: left;
height: 110px;
line-height: 110px;
display: table-cell;
vertical-align: middle;
}

Upvotes: 0

Related Questions