0

I have the following html code:

<div class="inlineSearchDiv">
     <i class="fa fa-search"></i>
</div>

where the css code looks like following:

.inlineSearchDiv {
    position:absolute;
    height:100%;
    width: 100px;
    margin-right:-100px;
    right:0;
    top:0;
    float:right;
    text-align:center;
    cursor:pointer;
}

I would like to know, how can I force my icon to be in the center of the div element (horizontally & vertically)? Here was my try:

.inlineSearchDiv i {
    -moz-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    -o-transform: translate(0,50%);
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);


}

however shall the height of the inlineSearchDiv changed, then my transform property was no longer refreshed

Robert J.
  • 2,631
  • 8
  • 32
  • 59
  • 6
    See this - http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically – Stickers Apr 06 '16 at 15:52
  • 2
    Already answered: http://stackoverflow.com/questions/22502660/centering-icon-font-in-css-circle-inside-of-parent – Marco Klein Apr 06 '16 at 15:56

2 Answers2

1

Forget the transform. Add this to your CSS:

 .fa-search { vertical-align:middle; }
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • I have replaced my .inlineSearchDiv i {} with your line, but unfortunately it did not work. Still aligned to the top – Robert J. Apr 07 '16 at 07:42
0

Based on the recommendations I changed my code to the following:

 .inlineSearchDiv i {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

Thank you for your help.

Robert J.
  • 2,631
  • 8
  • 32
  • 59