如何垂直居中对齐内联块元素

Question

我知道以前有人问过这个问题，但没有一个答案对我有帮助。我使用过vertical-align:middle;和line-height:normal;，但它们不起作用。我希望modal-bodydiv内部的内容垂直居中对齐。谢谢你的帮助。这是我的代码：

<div id="modal">
<div class="modal-header">
<div class="title">Please leave your feedback!</div>
</div>
<div class="modal-body">
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div>
<input id="submitfeedback" type="submit" value="Submit">
</div>

#modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 600px;
max-width: 80%;
text-align:center;
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-body {
padding: 10px 15px;
vertical-align: middle;
line-height: normal;
}
.rate {
display:inline-block;
height: 46px;
padding: 0 10px;
}

Answer 1

请尝试以下代码，这可能对您的有帮助

.modal-body {
padding: 10px 15px;
display: flex;
align-items: center;
}
.rate {
display: inline-flex;
height: 46px;
align-items: center;
padding: 0 10px;
background: red;
width: 100%;
justify-content: space-between;
}

Answer 2

.rate，模态主体内的项已经居中。rate内部的输入框和标签不是垂直居中的，因为它没有任何样式使其居中。我已经更新了你的html，并添加了一些样式，使其成为的中心

.rate{
height: 46px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
}

<div id="modal">
<div class="modal-header">
<div class="title">Please leave your feedback!</div>
</div>
<div class="modal-body">
<div class="rate">
<div class="item">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
</div>
<div class="item">
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
</div>
<div class="item">
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
</div>
<div class="item">
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
</div>
<div class="item">
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div>
</div>
<input id="submitfeedback" type="submit" value="Submit">
</div>

PS：您可以考虑以下代码段来修改输入和标签对齐

.item{
margin: 5px
}
.item *{
display:inline-block;
vertical-align:middle;
padding:0;
margin:0 5px 0 0;
}