Question

flexbox应该让事情看起来更简单，但我似乎无法让这个菜单中的文本链接和图像垂直对齐。文本链接和图像垂直和水平居中。缺少什么？我可能也过度使用它，好像我正在使用表格和vertical-align。我希望一切都与底部保持一致。

* {
    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/

Answer 1

在header > div的孩子身上设置flex，在其孙子身上设置align-self：

header > div {
  display: flex;
}

header > div > * {
  display: flex;
}

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

Working Fiddle

Answer 2

Try this 

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

使用flexbox垂直对齐文本

2 个答案: