垂直和水平居中图标和 div 边框上方的文本答案

【问题标题】：Center icon vertically and horizontally and text just above the div border垂直和水平居中图标和 div 边框上方的文本
【发布时间】：2017-06-14 00:35:17
【问题描述】：

我希望 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>

任何帮助都会很棒。

谢谢。

【问题讨论】：

你不能在元素中添加一些 padding top 或 margin top 吗？
我能做到……但我不想那样做。因为如果图标下方可能没有文字，那么我必须再次调整它。那么有没有办法处理提供的代码？
你可以增加行高。

标签： html css flexbox vertical-alignment

【解决方案1】：

您可以使用 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>

【讨论】：

【解决方案2】：

你可以自己做这个flexbox，你不需要calc来设置位置 - 位置绝对是 - 所以这就是我所做的：

您可以将reg_form_fields_icon_box 设为垂直和水平对齐的flexbox。

重置 margin: auto 并将其设置为 100% height 和 width 以及

.reg_form_fields_icon_box .reg_form_fields_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
  margin: 0;
}

现在定位 reg_form_fields_icon absolutely 并将其与 bottom 使用以下方法对齐：

.reg_form_fields_icon_box .reg_form_fields_icon .text_name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

请看下面的演示：

.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;
}
/*ADDED THESE*/

.reg_form_fields_icon_box .reg_form_fields_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
  margin: 0;
}
.reg_form_fields_icon_box .reg_form_fields_icon .text_name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

<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>

【讨论】：

【解决方案3】：

添加以下css：

div.reg_form_fields_icon_box {
    position: relative;
}

div.reg_form_fields_icon_box div.reg_form_fields_icon div.text_name{
    position: absolute;
    bottom: 0;
}

【讨论】：