我希望 sometext 刚好位于 div 边框之上。
.reg_form_fields_icon_box {
margin: 0 auto;
display: flex;
width: 80px;
height: 80px;
border: thin #dee5e7 solid;
}
.reg_form_fields_icon_box .reg_form_fields_icon {
margin: auto;
}
.reg_form_fields_icon_box .reg_form_fields_icon i {
font-size: 20px;
}
.reg_form_fields_icon_box .reg_form_fields_icon .text_name {
vertical-align: bottom;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="reg_form_fields_icon_box text-center">
<div class="reg_form_fields_icon">
<i class="glyphicon glyphicon-font"></i>
<div class="m-t-md text_name">
<span>sometext</span>
</div>
</div>
</div>
任何帮助都会很棒。
谢谢。
最佳答案
您可以使用 flexbox 尝试以下解决方案:
.reg_form_fields_icon_box {
margin: 0 auto;
width: 80px;
height: 80px;
border: thin #dee5e7 solid;
}
.reg_form_fields_icon_box .reg_form_fields_icon {
display:flex;
flex-direction:column;
width:100%;
height:100%;
text-align:center;
justify-content:space-between;
}
.reg_form_fields_icon_box .reg_form_fields_icon i {
font-size: 20px;
top:calc(50% - 20px);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="reg_form_fields_icon_box text-center">
<div class="reg_form_fields_icon">
<i class="glyphicon glyphicon-font"></i>
<div class="m-t-md text_name">
<span>sometext</span>
</div>
</div>
</div>
关于html - 垂直和水平居中图标和位于 div 边框上方的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41909041/