使用 flexbox 垂直对齐文本
using flexbox to vertical align text
flexbox 看起来应该使事情变得简单得多,但我似乎无法让此菜单中的文本链接和图像垂直对齐。文本链接和图像改为垂直和水平居中。少了什么东西?我可能也做完了,就好像我在使用表格和垂直对齐一样。我希望所有内容都对齐到底部。
* {
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>
Try this
header > div > a {
border: solid 1px #000;
float: left;
height: 110px;
line-height: 110px;
display: table-cell;
vertical-align: middle;
}
在 header > div
的 children 上设置 flex,在其 grandalign-self
上设置 flexchildren:
header > div {
display: flex;
}
header > div > * {
display: flex;
}
header > div > * > * {
align-self: flex-end;
}
flexbox 看起来应该使事情变得简单得多,但我似乎无法让此菜单中的文本链接和图像垂直对齐。文本链接和图像改为垂直和水平居中。少了什么东西?我可能也做完了,就好像我在使用表格和垂直对齐一样。我希望所有内容都对齐到底部。
* {
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>
Try this
header > div > a {
border: solid 1px #000;
float: left;
height: 110px;
line-height: 110px;
display: table-cell;
vertical-align: middle;
}
在 header > div
的 children 上设置 flex,在其 grandalign-self
上设置 flexchildren:
header > div {
display: flex;
}
header > div > * {
display: flex;
}
header > div > * > * {
align-self: flex-end;
}