[英]CSS - vertical align text and button
I have a jsfiddle here - https://jsfiddle.net/hjq6ay60/12/ 我在这里有一个jsfiddle- https ://jsfiddle.net/hjq6ay60/12/
Super simple, I always forget how to do this. 超级简单,我总是忘记该怎么做。
I have text floated left and a button floated right. 我的文本向左浮动,按钮向右浮动。
I just need to centre them both vertically - I'm sure you can do this with adding padding to the text. 我只需要将它们垂直居中-我确定您可以通过在文本中添加填充来做到这一点。
.block{
border: 1px solid red;
padding: 10px;
width: 400px;
&-top{
display: inline-block;
float: left;
vertical-align: middle;
}
&-bottom{
float: right;
vertical-align: middle;
&__button{
border: 1px solid grey;
height: 50px;
width: 50px;
}
}
}
why don't you use display:table
and display:table-cell
?? 为什么不使用display:table
和display:table-cell
? see here 看这里
.block {
display:table;
}
.block-bottom,.block-top {
display table-cell;
vertical-align: middle;
}
.block-bottom {
width: 50px;
}
and remove float:left
and float:right
from .block-bottom .block-top
并从.block-bottom .block-top
删除float:left
和float:right
We could make use of position
and translateY
this way: 我们可以通过以下方式利用position
和translateY
:
.block {
border: 1px solid red;
padding: 10px;
width: 400px;
position: relative; // Add here
&-top {
position: absolute; // Add here
top: 50%; // Add here
left: 5px; // Add here
right: 65px; // Add here
transform: translateY(-50%); // Add here
p {
margin: 0;
}
}
}
Preview 预习
One Line: https://jsfiddle.net/xpgszmvn/ 一行: https : //jsfiddle.net/xpgszmvn/
Multi Line: https://jsfiddle.net/zqxvwv8L/ 多行: https : //jsfiddle.net/zqxvwv8L/
Flexbox can do that for you, for free. Flexbox可以免费为您做到这一点。 Plus you get the added bonus of getting rid of the floats. 另外,您还能获得摆脱浮动的额外奖励。
.block{
border: 1px solid red;
padding: 10px;
width: 400px;
display: flex; align-items: center; /* Magic! */
&-top{
flex: 1; /* Stretch this item all the way */
/* By default, items take only as much as they need */
}
&-bottom{
/* No need for floats or display: */
&__button{
border: 1px solid grey;
height: 50px;
width: 50px;
}
}
}
use height
and line-height
at equal values for example 例如,以相同的值使用height
和line-height
button{
height:30px;
line-height:30px;
text-align:center;
}
Always text will come in center 文字始终会居中
For two line text 对于两行文字
button{
width:50px;
height:auto;
padding:10px;
}
This will create button with height depending on text 这将创建高度取决于文本的按钮
Try this, Surely work for you. 试试这个,一定为您工作。
.block {
display: table
}
.block-top {
display: table-cell;
vertical-align: middle;
}
.block-bottom {
display: table-cell;
width: 50px;
vertical-align: middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.