<分区>
标签 css
<分区>
有一个页面包含具有不同状态的产品条目列表。我希望能够为每个产品使用小丝带，这将表明产品的当前状态。
带有功能区的此类列表的示例位于此处:http://jsfiddle.net/19ren646/
HTML:
<div class="list-group-item">
<h4>Short item</h4>
<p>I don't have that much content really</p>
<div class="ribbon">
<span>Ribbon</span>
</div>
</div>
<div class="list-group-item">
<h4>A much longer item</h4>
<p>I have a lot of content, because I have a Lorem ipsum in me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet, minus maiores adipisci. Neque possimus, iusto odio explicabo. Libero, fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, aliquid.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos amet, minus maiores adipisci. Neque possimus, iusto odio explicabo. Libero, fugiat.</p>
<div class="ribbon">
<span>Ribbon</span>
</div>
</div>
CSS:
.list-group-item {
position:relative;
padding:20px;
padding-left:60px;
border:1px solid #ccc;
}
.ribbon {
position:absolute;
top:0;
left:0;
width:40px;
height:100%;
background:blue;
color:white;
}
.ribbon span {
display:block;
transform:rotate(90deg);
}
为了节省水平空间，色带旋转了 90 度。但是我的问题是，我可以在中间垂直放置功能区的文本吗？
例如，我知道我可以通过用户 position:relative 或 margins 将文本向下推，但这只有在所有条目项的高度都恒定的情况下才能正常工作，他们不是。那么我能否将文本推到中间，以适用于 .list-group-item 元素的任何高度的方式？
最佳答案
你可以在css中使用绝对定位+翻译功能:
http://jsfiddle.net/19ren646/1/
.ribbon span {
position: absolute;
top:50%;
display:block;
transform:rotate(90deg) translate(-50%);
}
为了与 safari 兼容，也可以使用 webkit 前缀定义
.ribbon span {
position: absolute;
top:50%;
display:block;
-webkit-transform: rotate(90deg) translate(-50%);
transform: rotate(90deg) translate(-50%);
}
关于css - 如何将 90 度旋转的 div 的内容居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32993481/