Question

您好我创建了一个按钮。我给了它引导中心。现在我需要使该按钮垂直对齐到页面中心而没有边距和填充。我该怎么做？

HTML在下面给出

<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
    <button class="case-study-button">
      <a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a>
    </button>
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

CSS在下面给出

/* without margin and padding */

.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

Answer 1

您可以将按钮绝对定位到50％，然后使用变换平移将其居中。在按钮上使用固定宽度可能会导致响应问题。

.wrap {
  border: 1px solid black;
  height: 300px;
}

.case-study-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  height: 61px;
  max-width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 wrap"><button class="case-study-button"><a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a>
                </button></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

Answer 2

You can set 'display:flex' to its parent div and 'align-items:center'.

＆＃13;

.btnOuter{
  display:flex;
  align-items:center;
  height:500px
}
.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
  <div class="btnOuter">
  <button class="case-study-button"><a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a></button>
    </div>            
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

＆＃13;

Answer 3

像这样更改CSS部分： -

.case-study-button {
  height: 10%;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
  position:absolute;
  top:45%;
}

按钮垂直对齐

3 个答案: