[英]How to align an element to the right while staying vertically centered?
我希望“William Marchesi”和“Contact”文本垂直居中，标题右侧的“Contact”按钮。 当我尝试float: right ，联系文本会移动到高于“William Marchesi”文本。
html { height: 100%; background-repeat: no-repeat; background-color: green; } body { font-size: 87.5%; /* Base font size on 14px */ font-family: sans-serif; line-height: 1.5; text-align: justify; margin: 0 auto; padding: 0; } a { text-decoration: none; color: inherit; } .header div { margin: 0 auto; width: 70%; clear: both; padding: 0; } .header { background-color: #FCFCFC; width: 100%; padding: 0; margin: 0 auto; /*height: 5em;*/ } .heading, .contactButton { display: inline-block; padding: 0; margin: 0; vertical-align: middle; line-height: 3em; height: 3em; font-family: 'Nunito', sans-serif; } .heading { font-size: 3em; padding: 0; margin: 0; } .contactButton { font-size: 2em; text-align: right; padding: 0; margin: 0; float: right; }
<body class="body"> <div class="header"> <div> <h1 class="heading">William Marchesi</h1> <a class="contactButton" href="#contact">Contact</a> </div> </div> </body>
这是许多可能的解决方案之一，在联系按钮上使用position:absolute 。
html { height: 100%; background-repeat: no-repeat; background-color: green; } body { font-size: 87.5%; /* Base font size on 14px */ font-family: sans-serif; line-height: 1.5; text-align: justify; margin: 0 auto; padding: 0; } a { text-decoration: none; color: inherit; } .header div { margin: 0 auto; padding: 0; text-align:center; } .header { background-color: #FCFCFC; padding: 0; } .heading, .contactButton { padding: 0; margin: 0; vertical-align: middle; line-height: 3em; font-family: 'Nunito', sans-serif; } .heading { font-size: 3em; padding: 0; margin: 0; } .contactButton { font-size: 2em; text-align: right; padding: 0; margin: 0; position:absolute; top:0.8em; right:1em; }
<div class="header"> <div> <h1 class="heading">William Marchesi</h1> <a class="contactButton" href="#contact">Contact</a> </div> </div>
您可以使用 margin-left 而不是 float
html {
height: 100%;
background-repeat: no-repeat;
background-color: green;
}
body {
font-size: 87.5%; /* Base font size on 14px */
font-family: sans-serif;
line-height: 1.5;
text-align: justify;
margin: 0 auto;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
.header div {
margin: 0 auto;
width: 70%;
clear: both;
padding: 0;
}
.header {
background-color: #FCFCFC;
width:100%;
padding: 0;
margin: 0 auto;
/*height: 5em;*/
}
.heading, .contactButton {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
line-height: 3em;
height: 3em;
font-family: 'Nunito', sans-serif;
}
.heading {
font-size: 3em;
padding: 0;
margin: 0;
}
.contactButton {
font-size: 2em;
text-align: right;
padding: 0;
margin-left: 59%;
}
这是一个 flexbox 解决方案，它使居中变得简单易行：
body { background-color: green; font-size: 87.5%; margin: 0; padding: 0; } .header { display: flex; justify-content: space-around; /* horizontal alignment of children */ align-items: center; /* vertical alignment of children */ height: 6rem; background-color: #FCFCFC; } .heading { font-size: 3em; font-family: 'Nunito', sans-serif; } .contactButton { font-size: 2em; font-family: 'Nunito', sans-serif; } a { text-decoration: none; color: inherit; }
<body class="body"> <div class="header"> <h1 class="heading">William Marchesi</h1> <a class="contactButton" href="#contact">Contact</a> </div> </body>
更多关于 flex 居中的信息：
浏览器支持：除 IE < 10 外，所有主流浏览器都支持Flexbox。 一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。 要快速添加前缀，请使用Autoprefixer 。 此答案中的更多详细信息。
你可以很容易地使用 flexbox ( display: flex ) 来做到这一点。
试试我的 jsFiddle 。
如何在图像的右侧垂直和水平居中对齐文本？
[英]How can I align text centered vertically and horizontally to the right of an image?
左对齐文本，右对齐图像，并在 a 内垂直居中
[英]Align text on the left, image floating on the right and vertically centered inside a <td>
如何在不使居中元素的位置关闭的情况下正确对齐表单？
[英]How can I align an form right without making centered element's position off?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.