Question

我的布局看起来有点像书架see my jsfiddle example。书架是响应性的，所以没有固定的宽度。我面临的问题是，我无法将文本置于面板中心，水平＆＃34;在书籍方面。由于文本被转换为垂直显示，因此它非常棘手。有没有人对如何使这项工作有任何想法？

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

您有两个简单的选项，display：flex或table：

display：table example：

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

或flex：

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>

http://codepen.io/gc-nomade/pen/obBYyY

Answer 2

执行以下操作：

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

查看我的演示here或您的jfiddle

您可能需要在具有媒体查询功能的微型智能手机上进行小幅调整，但除此之外还可以使用

将此添加到响应式css：

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

Answer 3

将这些行添加到您的代码中：

.panel a{
       position:relative;
    }

.panel a span {
      position:absolute;
      left:40%;
       /* top:50%; */
    }

Here is the fiddle

Answer 4

如果您希望文本中心垂直使用text-align: center .panel a span下方.panel a span { text-align: center; }下面的属性，请将文字放在面板的角落中心

.panel a span {
    text-align: center;
    margin-left: -260px;
}

如果您希望面板中间的中心文字不在角落

public interface APIService {

    //////////////////////// Auth ///////////////////
    @GET("/youtube/v3/search")
    Call<JSONObject> getYoutbeFeeds(@Query("key") String developerKey, @Query("channelId") String channelId,@Query("part") String id,@Query("alt") String alt);
    /////////////////////////////////////////////
}

将元素中的垂直跨度居中

4 个答案: