我试图垂直对齐左侧 div 中的文本“地址”。但我做不到。
这是代码，
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row">
<!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>我做错了什么。我正在使用 bootsrap 3。
笨蛋:https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (全屏查看 Plunker)
我正在尝试获得与此类似的结果。彩色边框仅用于表示 
.
最佳答案
您正在将样式设置为中心 div，而应该是中心 div 内的标签
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>关于html - 相对于行垂直对齐 Div 中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46365951/