如何在容器中垂直居中按钮
如何在容器中垂直居中按钮
提问于 2019-07-26 02:46:04
如何在框容器中垂直居中我的视图按钮。
我试着用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;
}
回答 2
Stack Overflow用户
发布于 2019-07-26 03:00:11
尝试使用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>和用于align的css：
.align {
display: flex;
justify-content: center;
align-items: center;
}这是codesandbox link
Stack Overflow用户
发布于 2019-07-26 03:30:05
舒布汉姆的答案几乎是正确的。但是，需要具有display:flex属性的css类实际上位于行本身。Bootstrap4.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57208419
复制相关文章
相似问题
腾讯云开发者
