我需要在form-actions
垂直内部获取一个按钮:
这是显示的方式:
因此绿色按钮显示在其div(蓝色区域)下方。我怎样才能让它居中。我使用style.css
文件,我在其中设置了其他一些div。
答案 0 :(得分:13)
这就是你需要的!这是一个演示,如果您还有其他需要,请检查并告诉我。
<div style="height: 200px; border: solid 2px green; text-align:center;line-height:200px;">
<input type="submit" Value="Ok" style="vertical-align: middle"></input>
</div>
更新了代码和小提琴:
我们不应该使用内联样式,因此下面是具有单独样式的更新小提琴
<div id="container">
<input id="verticalButton" type="submit" Value="Ok"></input>
</div>
div#container
{
height: 200px;
border: solid 2px green; text-align:center;
line-height:200px;
}
input#verticalButton
{
vertical-align: middle
}
希望这有帮助!
答案 1 :(得分:1)
使用像
这样的风格display:table-cell; //main div
vertical-align:center; // to button
如果这不起作用,请尝试
height:100%; // to button
vertical-align:center; // to button
line-height : 100%; // to button
答案 2 :(得分:1)
由于我不想设置绝对高度,我使用了柔性盒。
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.container {
height:50%;
border: 1px solid black;
display:flex;
align-items:center; /* vertically aligned! */
justify-content: center;
}
.other {
height:320px;
border: 1px solid red;
}
<div class="other"><!-- Other content -->
Welcome to my great site!
<div class="container"> <!-- the container you want that button -->
<button class="btn btn-danger btn-lg">
Hello World
</button>
</div>
</div>