Question

我正在尝试垂直和水平对齐一行文本和一个Bootstrap按钮。 div的高度使用vh设置。我知道这个问题还有其他答案，但是我无法让它们正确居中。

＆＃13;

#centertext {
  text-align: center;
  height: 30vh;
}

＆＃13;

<div class="container" id="centertext">
  <h4> Want to download a more detailed version of my resume?</h4>
  <a href="#" class="btn btn-primary">
    <span class="glyphicon glyphicon-file"></span>     Download
  </a>        
</div>

＆＃13;

Answer 1

试试这个：

＆＃13;

* {
  padding: 0;
  margin: 0;
} /* Resets all default margins */

h4 {  margin-bottom: 1.33em  }

#centertext {
  text-align: center;
  height: 30vh;
  background: red;
  position: relative;
}

#centertext .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

＆＃13;

<div class="container" id="centertext">
  <div class="wrapper">
    <h4> Want to download a more detailed version of my resume?</h4>
    <a href="#" class="btn btn-primary">
      <span class="glyphicon glyphicon-file"></span> Download
    </a>

  </div>
</div>

＆＃13;

Answer 2

试试这段代码..

http://codepen.io/gmkhussain/pen/MJYmVX

#centertext {
  height: 300px;
  line-height: 300px;
  text-align: center;
  border: 2px dashed #39c;
}
.inr {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

Answer 3

尝试使用display: flex;样式。

＆＃13;

#centertext {
  text-align: center;
  height: 30vh;
  vertical-align: middle;
  float: none;
  background-color: grey;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#centertext .btn-primary,
#centertext h4 {
  margin: 0 auto;
}
body {
  background-color: white;
}

＆＃13;

<br>
<div class="container" id="centertext">
  <h4> Want to download a more detailed version of my resume?</h4>
  <a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-file"></span> Download</a>
</div>

＆＃13;

Answer 4

这对我有用，第二个div允许更多样式，这个答案是这个questions答案的变体，但是这个答案正确显示。

感谢@GMK Hussain

＆＃13;

#centertext {
  height: 300px;
  line-height: 300px;
  text-align: center;
  border: 2px dashed #39c;
}
.inr {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

＆＃13;

水平和垂直引导按钮

4 个答案: