[英]How to vertically center a button and text inside a div
我目前有一个这样的页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
我希望h3
和button
在div
垂直对齐,我尝试将样式设置为vertical-align:middle
但它不起作用。 我该怎么办?
编辑:似乎我原来的问题不清楚。 我的意思是我希望标题文本和按钮出现在同一“行”上,但要在该行上垂直对齐。 现在,我可以让它们在同一条线上但文本和按钮将由顶边而不是中心对齐。
编织: http : //kodeweave.sourceforge.net/editor/#0def3ea11664636810328b98a8780ed2
你没有发布你的CSS,所以我不知道你在做什么。 所以这里有一个快速说明:
注意: vertical-align
仅适用于display: table-cell;
和display: inline;
elements(它也适用于:: first-letter和:: first-line )。
这是一个使用display: table;
的简单解决方案display: table;
在父和display: table-cell;
为了你想要的垂直居中。
如果你想让你的按钮居中,你必须删除pull-right
类,或者你可以在它之后添加另一个类,然后覆盖它的css。 (简单的解决方案,只需删除pull-right
类。
编辑:那么你想要与你的h3标签在同一行的按钮对吗?
在我告诉你如何解决这个问题之前,请记住h1-h5标签都display: block;
元素意味着它们将始终作为新线嵌入。 (就像段落<p>标签一样)所以你需要告诉h3标签显示inline
或inline-block
。
这是我的修改编织: http : //kodeweave.sourceforge.net/editor/#7b9839fb7971df2a27b7af895169ad8a
html, body { height: 100%; } .table { display: table; width: 100%; height: 100%; } .cell { display: table-cell; vertical-align: middle; } h3 { display: inline-block; } .btn { margin-top: 15px; }
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/> <div class="container table"> <div class="page-header cell"> <h3>HEADING</h3> <button class="btn btn-danger pull-right">Button</button> </div> </div>
如果需要,可以通过将bootstraps默认边距和填充设置为0px
来验证元素是否垂直对齐。
.container {
white-space: nowrap;
background: #eee;
}
.contener:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.page-header {
display: inline-block;
vertical-align: middle;
width: 300px;
}
https://jsfiddle.net/dsupreme/m92e9dkr/
使用FlexBox
HTML代码:
<div class="container">
<div class="page-header">
<div id="vertical"><h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button></div></div>
</div>
</div>
</div>
CSS代码:
.container {
width: 100%;
text-align: center;
}
#vertical {
width: 100%;
}
h3 {
margin: 0;
padding: 0;
}
.page-header {
height: 200px;
width: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
http://codepen.io/ruchiccio/pen/xVmJaG
<div class="container">
<div class="page-header">
<div id="vertical"><h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button></div></div>
</div>
#vertical {
position: absolute;
top: 40%;
width: 100%;
}
h3 {
margin: 0;
padding: 0;
}
.page-header {
height: 200px;
background-color: red;
position: relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.