不同高度的垂直对齐元素与顶部/底部边缘
不同高度的垂直对齐元素与顶部/底部边缘
提问于 2015-08-14 16:37:52
我一直试图在列表中垂直对齐链接，其中除一个链接外，所有链接都有背景色/边框(看起来像一个按钮)。
即使这个小提琴上的代码有效，它也不尊重降低的链接高度(在链接中的标志)。
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
a.button {
height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li><a href="/#">Link 1</a></li>
<li><a href="/#">Link 2</a></li>
<li><a href="/#">Link 3</a></li>
<li>
<a class="button" href="#" style="height: 60px;">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>
JSFiddle链接：http://jsfiddle.net/6er3aguk/
我想要达到的基本目标是在链接中的标志上有某种上下边距，这样它就不会停留在周围div的顶部和底部。
对我如何做到这一点有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-14 17:24:39
我就是这样创造出你想要的效果的。
这将垂直中心的链接，清除正确的父。不管浏览器的字体设置如何，如果窗口比导航线小，则在最小宽度处，如果窗口小于导航线，则每个元素与容器两侧之间的间距将不再缩小15 to，而不是重叠或移动到新行。
这也完全避免了浮点数和display: table黑客的使用。
JSFiddle
*, *:before, *:after {
box-sizing: border-box;
}
html body, ul, div, li, a {
padding: 0;
margin: 0;
}
.left, .right {
position: absolute;
top: 0; bottom: 0;
white-space: nowrap;
}
.left {
position: absolute;
left: 15px;
}
.right {
text-align: right;
position: absolute;
left: 172.5px;
right: 0;
}
.inner {
position: relative;
height: 75px;
background-color: grey;
}
ul {
height: 100%;
font-size: 0;
}
ul:before {
content: " ";
height: 100%;
}
ul:before,
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
font-size: 12pt;
display: block;
vertical-align: middle;
color: white;
text-decoration: none;
font-weight: normal;
padding: 10px 7.5px;
}
.right li:last-child {
padding-left: 7.5px;
padding-right: 15px;
}
.right a {
border-radius: 3px;
}
.right a:hover {
background: #888;
}
.icon-user:before {
content:"\e745";
}
a.button {
background: #f38060;
color: white;
padding: 10px 15px;
}
a.button:hover {
background: #f98666;
}
a.logo {
background-image: url(//placehold.it/150x20);
background-size: 150px 20px;
height: 20px;
width: 150px;
padding: 0px;
}<div class="inner">
<ul class="left">
<li><a class="logo" href="/"></a></li>
</ul>
<div class="right">
<a class="mobile-menu" href="#">
<span class="icon-menu"></span>
</a>
<ul>
<li><a href="/#">Link 1</a></li>
<li><a href="/#">Link 2</a></li>
<li><a href="/#">Link 3</a></li>
<li>
<a class="button" href="#">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>
Stack Overflow用户
发布于 2015-08-14 16:47:45
您可以通过将Sign In文本和span放在div中，并将为a.button所做的相同样式应用到该div中，从而实现首选样式。
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
#signin {
max-height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li><a href="/#">Link 1</a>
</li>
<li><a href="/#">Link 2</a>
</li>
<li><a href="/#">Link 3</a>
</li>
<li>
<a class="button" href="#" style="
height: 60px;
">
<div id="signin">Sign In<span class="icon-user"></span>
</div>
</a>
</li>
</ul>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32014837
复制相关文章
相似问题
腾讯云开发者
