将元素中的垂直跨度居中

Question

我的布局看起来有点像书架,请参阅我的jsfiddle示例.书架是响应性的,所以没有固定的宽度.我面临的问题是,我无法将文本集中在面板中,"横向"在书籍两侧.由于文本被转换为垂直显示,因此它非常棘手.有没有人对如何使这项工作有任何想法？

HTML

<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;
}

Answer 1

请执行下列操作：

.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%;
}

在这里查看我的演示 或你的jfiddle

您可能需要对带有媒体查询的小型智能手机进行一些小调整，但除此之外它还可以

将其添加到响应式 CSS 中：

@media (max-width: 560px){
  .panel a span {
    left: 25%;
  }
}