CODEWITHSUNDEEP
htmlcssflexboxvertical-alignment
user7030651
user7030651

Reputation:

Center icon vertically and horizontally and text just above the div border

I want the sometext to be just above the div border.

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

just like in the image

Any help would be great.

Thank you.

Upvotes: 1

Views: 107

Answers (3)

kukkuz
kukkuz

Reputation: 42352

You can do this flexbox itself and you don't need calc to set the positions - position it absolutely - so here is what I did:

  1. You can make your reg_form_fields_icon_box a flexbox that is vertically and horizontally aligned.

  2. Reset the margin: auto and set it to 100% height and width as well

    .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;
}

  3. Now position the reg_form_fields_icon absolutely and align it to the bottom using this:

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

See demo below:

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

Upvotes: 0

Fabio S
Fabio S

Reputation: 1122

Add the following 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;
}

Upvotes: 0

Sebastian Brosch
Sebastian Brosch

Reputation: 43584

You can try the following solution using 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>

Upvotes: 1

Related Questions