在一个单元内以垂直跨度为中心
在一个单元内以垂直跨度为中心
提问于 2016-01-02 05:45:36
我有一个看起来有点像书架的布局，看我的小提琴手例子。书架是响应的，所以没有固定的宽度。我面临的问题是，我不能在面板中对文本进行居中，在书的侧面“水平”。这是额外的棘手，因为文本被转换为垂直显示。有谁知道如何使这件事成功吗？
<div class="panel">
<a href="#first">
<span>first</span>
</a>
</div>CSS
.panel {
float: left;
height: 100%;
width: 15%;
margin-right: 5%;
}
.panel a {
text-align: right;
background: green;
padding: 20px 10px;
height: 100%;
display: block;
white-space: nowrap;
color: white;
float: left;
width: 100%;
text-decoration:none;
}
.panel a span {
white-space: nowrap;
color: white;
text-transform: lowercase;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin: top right;
display: block;
width: 300px;
margin-left: -300px;
letter-spacing: 1px;
font-size: 20px;
}回答 4
Stack Overflow用户
发布于 2016-01-02 06:10:33
您有两个简单的选项，要么是displayflex，要么是table：
显示:表示例：
body,
html,
.panel-wrapper {
height: 100%;
width: 100%;
}
.panel-wrapper {
display: table;
border-collape: collapse;
table-layout: fixed;
background: white;
}
.panel {
display: table-cell;
height: 100%;
width: 20%;/* you have five here*/
}
.panel a {
display: block;
text-align: center;
background: green;
padding: 20px 10px;
box-sizing:border-box;/*includes padding and borders */
height: 100%;
width: 75%;/* each is 15% width */
text-decoration: none;
white-space: nowrap;
}
.panel a:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;/*inline content will vertical-align middle aside it */
}
.panel a span {
display: inline-block;/* triggers transform*/
color: white;
text-transform: lowercase;
transform: rotate(-90deg);
letter-spacing: 1px;
font-size: 20px;
vertical-align: middle;
}<div class="panel-wrapper">
<div class="panel"><a href="#first"><span>first</span></a>
</div>
<div class="panel"><a href="#second"><span>second</span></a>
</div>
<div class="panel"><a href="#third"><span>third</span></a>
</div>
<div class="panel"><a href="#fourth"><span>fourth</span></a>
</div>
<div class="panel"><a href="#fifth"><span>fifth</span></a>
</div>
</div>
http://codepen.io/gc-nomade/pen/JGEbLX
或挠曲：
body,
html,
.panel-wrapper {
height: 100%;
width: 100%;
margin: 0;
}
.panel {
float: left;
height: 100%;
width: 15%;
margin-right: 5%;
}
.panel a {
text-align: right;
background: green;
padding: 20px 10px;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
;
white-space: nowrap;
color: white;
text-decoration: none;
}
.panel a span {
white-space: nowrap;
color: white;
transform: rotate(-90deg);
letter-spacing: 1px;
font-size: 20px;
}<div class="panel-wrapper">
<div class="panel"><a href="#first"><span>first</span></a>
</div>
<div class="panel"><a href="#second"><span>second</span></a>
</div>
<div class="panel"><a href="#third"><span>third</span></a>
</div>
<div class="panel"><a href="#fourth"><span>fourth</span></a>
</div>
<div class="panel"><a href="#fifth"><span>fifth</span></a>
</div>
</div>
Stack Overflow用户
发布于 2016-01-02 05:55:14
做以下工作：
.panel a span {
white-space: nowrap;
color: white;
text-transform: lowercase;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin: top right;
display: block;
width: 300px;
margin-left: -300px;
letter-spacing: 1px;
font-size: 20px;
position:relative;
left: 45%;
}您可能需要在带有媒体查询的小型智能手机上进行小调整，但除此之外，它还可以工作。
将此添加到响应性css中：
@media (max-width: 560px){
.panel a span {
left: 25%;
}
}Stack Overflow用户
发布于 2016-01-02 06:07:59
将以下行添加到代码中：
.panel a{
position:relative;
}
.panel a span {
position:absolute;
left:40%;
/* top:50%; */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34566553
复制相关文章
相似问题
腾讯云开发者
