Question

我有响应式面板。我已经尝试了很多东西来让文本垂直居中，但是我无法使用twitter-bootstrap来处理我所拥有的内容。

＆＃13;

    *,

    *:before,

    *:after {

      box-sizing: border-box;

    }

    body {

      margin: 0

    }

    .testing-here {

      font-size: 0;

    }

    .panel-default {

      box-sizing: border-box;

      position: relative;

      width: 50%;

      padding-bottom: 40%;

      overflow: hidden;

      background-color: #446CB3;

      display: inline-block;

    }

    .panel-body {

      color: white;

      width: 100%;

      height: 100%;

      text-align: center;

      position: absolute;

      font-size: 16px;

      display: table-cell;

      vertical-align: middle;

    }

＆＃13;

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example show me full page & resize window
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example font-size kept in between 16 and 50px max
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

＆＃13;

我调查过的问题：

Answer 1

尝试使用Flexbox：这是使用flexbox垂直和水平居中的工作示例。

工作示例

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.testing-here {
  font-size: 0;
}
.panel-default {
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  overflow: hidden;
  background-color: #446CB3;
  display: inline-block;
}

.panel-body {
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  font-size: 16px;
  justify-content: center;
    align-items: center;
    display: flex;
}

Answer 2

我也遇到了这个问题，文字位于底部。将flex方向更改为列固定即可。

高度100％时如何将文本顶部/底部居中显示内联块？

2 个答案: