Question

如何在包装盒中垂直放置“查看”按钮的中心。

我尝试使用vertical-align:center;设置按钮样式，但是没有用。

我尝试添加：position: relative; top: 50%; transform: perspective(1px) translateY(-50%);。

但这只会使按钮的一半出现在容器的顶部，另一半出现在容器的内部

查看：

<div class="container signup2">
<div class="title container">
  <h2> Enrolled Courses: </h2>
</div>
<div class="container box">
  <div class="row col-centered">
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 index">
      <h3><%= course.name %></h3>
      <p><%= course.description %></p>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
      <%= link_to "View", course_path(course), class: "btn button buttonmargin align" %>
    </div>
  </div>
</div>
</div>

custom.scss：

.signup2 {
  margin-top: 120px;
}

.title {
  margin-bottom: 15px;
}

.box {
  background-color: #f7f7f7;
  margin-bottom: 20px;
}

.index {
  text-align: left;
}

.align {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

.button {
  background-color: #20B2AA;
  color: white;
}

.buttonmargin {
  margin-left: 150px;
}

This is how it looks like

Answer 1

尝试使用flex。

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 align"> //moved align class here
      <%= link_to "View", course_path(course), class: "btn button buttonmargin" %>
    </div>

和CSS进行 align ：

.align {
  display: flex;
  justify-content: center;
  align-items: center;
}

这是密码框link

Answer 2

Shubham的答案几乎是正确的。但是，需要具有display:flex属性的css类实际上在行本身上。 Bootstrap 4.0无需修改CSS，而是具有一个名为.d-flex的内置类，您可以将其与.align-items-center配对使用，它将起作用。请参阅以下示例：

没有定义高度属性：

<div class="container">
    <div class="row d-flex align-items-center">
        <div class="col-12">
            Anything in here will be vertically centered
        </div>
    </div>
</div>

在容器上具有定义的height属性：

<div class="container d-flex align-items-center" style="height:500px">
    <div class="row">
        <div class="col-12">
            Anything in here will be vertically centered
        </div>
    </div>
</div>

如何在容器中垂直居中放置按钮

2 个答案: