Question

这是我的jsfiddle：https://jsfiddle.net/DTcHh/39748/

我希望文本Hello World以垂直方向居中，但不知何故它不起作用。我该如何解决这个问题？

这是我的CSS：

.app-header{
  height: 50px;
  background: #000;
  color: #fff;
}
.v-center{
  vertical-align:middle;
}

Answer 1

将glViewport设置为div line-height。

＆＃13;

height

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.app-header {
  height: 50px;
  background: #000;
  color: #fff;
}

.v-center {
  text-align: center;
  vertical-align: middle;
  line-height: 50px; /* .app-header div height */
}

＆＃13;

Answer 2

只需将行高设置为标题的相同高度：

.v-center{
  vertical-align:middle;
  line-height: 50px;
}

通过这种方式，您可以继续使用bootstrap框架类，而无需引入flexbox或绝对定位。

此处更新了codepen：https://codepen.io/alezuc/pen/MOqWwP

Answer 3

你可以用很多不同的方式做到这一点。

一种方法是将display:flex;与align-items:center一起使用。

见下文

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.app-header{
  height: 50px;
  background: #000;
  color: #fff;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.container {
  width:100%;
}
.v-center{
  
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="app-header">
  <div class="container clearfix">
    <div class="pull-right v-center">
      Hello World
    </div>
  </div>
  
</div>

＆＃13;

这将是一个响应式解决方案，意味着无论标题的高度如何，文本都将在其中心垂直对齐。

另一种解决方案是将line-height的{{1}}设置为与您的标题高度相等，在您的情况下v-center

Answer 4

将line-height:50px;提交给.v-center课程。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.app-header{
  height: 50px;
  background: #000;
  color: #fff;
}
.v-center{
  vertical-align:middle;
  line-height:50px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="app-header">
  <div class="container clearfix">
    <div class="pull-right v-center">
      Hello World
    </div>
  </div>
  
</div>

垂直对齐中心在Bootstrap容器内不起作用

4 个答案: