[英]How to make bootstrap badge vertically center aligned?
Here is the jsfiddle. 这是jsfiddle。 https://jsfiddle.net/8mfr1x79/1/ https://jsfiddle.net/8mfr1x79/1/
<div class="container">
<div class="list-group">
<a class="lis-group-item" href="#">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. <span class="badge badge-default pull-right">A long badge</span>
</a>
</div>
</div>
Is there any easy way so that whole text of the "a" element on the left gets adjusted towards a little left so that the badge aligns vertically in center? 是否有任何简单的方法使左侧“a”元素的整个文本向左侧调整,以使徽章在中心垂直对齐?
I can give fixed width to the content on left, but I am concerned about all device sizes. 我可以给左边的内容固定宽度,但我担心所有设备大小。
Thanks in advance. 提前致谢。
Flexbox could do that Flexbox可以做到这一点
a.list-group-item { display: flex; align-items: center; } a .text { flex: 1; } a .badge { flex: 0 0 auto; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="list-group"> <a class="list-group-item" href="#"> <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. </span><span class="badge badge-default">A long badge</span> </a> </div> </div> <div class="container"> <div class="list-group"> <a class="list-group-item" href="#"> <span class="text">Lorem ipsum dolor </span><span class="badge badge-default">A long badge</span> </a> </div> </div>
Missunderstood your question. 误解了你的问题。 Hold on. 坚持,稍等。
Switch the position of the badge with your text, the text will flow around it. 使用您的文本切换徽章的位置,文本将围绕它流动。
<div class="container">
<div class="list-group">
<a class="lis-group-item" href="#">
<span class="badge badge-default pull-right">A long badge</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus.
</a>
</div>
</div>
Note: this only works because of the badges .pull-right
/ float: right;
注意:这只能用于徽章.pull-right
/ float: right;
I'd probably use table-cells and get rid of the float. 我可能会使用表格单元格并摆脱浮动。
https://jsfiddle.net/8mfr1x79/4/ https://jsfiddle.net/8mfr1x79/4/
<div class="container">
<div class="list-group">
<a class="lis-group-item table" href="#">
<span class="tableCell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus.
</span>
<span class="tableCell">
<span class="badge badge-default">A long badge</span>
</span>
</a>
</div>
</div>
Css CSS
.table{
display: table;
}
.tableCell{
display: table-cell;
vertical-align: middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.