CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7030651
user7030651

Reputation:

how to put icon vertically and horizontally center

I want to have an icon to be vertically and horizontally centered to the div.

.exhibitor_image_div{
    width: 200px;
    height: 200px;
    border: thin black solid;
    -webkit-border-radius: 3px ;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0 auto;
    text-align: center;
}

.exhibitor_image_default_icon{
    height: 70px;
    width: 70px;
    margin: 0 auto;
    position:relative;
    top: 50%;
}


 span i {
     font-size: 65px;
 }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="exhibitor_image_div">
    <div class="exhibitor_image_default_icon">
        <span><i class="glyphicon glyphicon-user"></i></span>
    </div>
</div>

I have given 50% from top. but it is not vertically centered.

Upvotes: 2

Views: 126

Answers (6)

Jordi Flores
Jordi Flores

Reputation: 2150

You can use the awesome property calc, to calculate 50% - image height

Take a look at the example, i've just adde the calc property to the css 

.exhibitor_image_div{
  width: 200px;
  height: 200px;
  border: thin black solid;
  -webkit-border-radius: 3px ;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 auto;
  text-align: center;
}
.exhibitor_image_default_icon{
  height: 70px;
  width: 70px;
  margin: 0 auto;
  position:relative;
  top: calc(50% - 35px);
  // border: thin red solid;
}
span i{
  font-size: 65px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="exhibitor_image_div">
  <div class="exhibitor_image_default_icon">
    <span><i class="glyphicon glyphicon-user"></i> </span>
  </div>
</div>

Upvotes: 1

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Minimalistic flexbox solution: just add to item margin: auto (of course, add display: flex to containter). This will center item both horizontally and vertically. And you don't have to deal with absolutely positioned blocks.

Final code, removed redundant styles:

.exhibitor_image_div {
  width: 200px;
  height: 200px;
  border: thin black solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 auto;
  display: flex;
}

.exhibitor_image_default_icon {
  height: 70px;
  width: 70px;
  margin: auto;
}

span i {
  font-size: 65px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="exhibitor_image_div">
  <div class="exhibitor_image_default_icon">
    <span><i class="glyphicon glyphicon-user"></i></span>
  </div>
</div>

Upvotes: 0

Christa
Christa

Reputation: 73

I have found this article to be quite helpful - https://css-tricks.com/centering-css-complete-guide/

However in relation to your problem specifically - you just need to add 1 line of code:

.exhibitor_image_default_icon{
    height: 70px;
    width: 70px;
    margin: 0 auto;
    position:relative;
    top: 50%;
    transform: translateY(-50%); <-- new line of code 
    /* add the browser specific transform */
}

JS fiddle: https://jsfiddle.net/chris2001/orfp8bb4/1/

Upvotes: 0

Kyle
Kyle

Reputation: 67194

You can use a CSS transform to move the icon up 50% of its height, and thus center the icon in its parent element.

.exhibitor_image_div {
  width: 200px;
  height: 200px;
  border: thin black solid;
  -webkit-border-radius: 3px ;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 auto;
  text-align: center;
}
.exhibitor_image_default_icon {
  height: 70px;
  width: 70px;
  margin: 0 auto;
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  // border: thin red solid;
}
span i {
  font-size: 65px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="exhibitor_image_div">
  <div class="exhibitor_image_default_icon">
    <span><i class="glyphicon glyphicon-user"></i> </span>
  </div>
</div>

Upvotes: 2

schrej
schrej

Reputation: 450

You could use display: flex; and flex-direction: column; on the parent and add a flex-grow: 1; div above and below the icon. The growing divs will then divide the available space evenly between them and vertically center the icon.

With this it does not matter how large the centered div is.

browser support

.exhibitor_image_div{
    width: 200px;
    height: 200px;
    border: thin black solid;
    -webkit-border-radius: 3px ;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0 auto;
    text-align: center;

    /* New */
    display: flex;
    flex-direction: column;
  }

 .exhibitor_image_default_icon{
     height: 70px;
     width: 70px;
     margin: 0 auto;
     position:relative;
     /*border: thin red solid;*/
 }


 span i {
     font-size: 65px;
 }


 /* New */
 .flex_grow {
     flex-grow: 1;
 }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="exhibitor_image_div">
    <div class="flex_grow"></div><!-- HERE -->
    <div class="exhibitor_image_default_icon">
        <span><i class="glyphicon glyphicon-user"></i> </span>
    </div>
    <div class="flex_grow"></div><!-- HERE -->
</div>

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

Used CSS transform for horizontal center of the parent using translateY(-50%)

.exhibitor_image_div{
  width: 200px;
  height: 200px;
  border: thin black solid;
  -webkit-border-radius: 3px ;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 auto;
  text-align: center;
}

.exhibitor_image_default_icon{
  height: 70px;
  width: 70px;
  margin: 0 auto;
  position:relative;
  top: 50%;
  // border: thin red solid;
  transform: translateY(-50%);
}

span i{
  font-size: 65px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="exhibitor_image_div">

  <div class="exhibitor_image_default_icon">
    <span><i class="glyphicon glyphicon-user"></i> </span>
  </div>
</div>

Upvotes: 0

Related Questions