Clever Geek Handbook

How to center content of an absolute div horizontally

I am using font awesome library. I would like to place the horizontal center of the arrow icon. And DIV must be absolute .

I am using this code but it doesn't work.

.arrow {
   left: 0;
   right: 0;
}

JSFiddle Demo

+3


source to share


5 answers


Use width:100%

in absolutediv 

.home .center {
    position: absolute;
    bottom: 0;
    top:30px;
    text-align: center;
    width:100%;
}


Updated fiddle

+3


source


Here's an example of how it works. You can remove the .arrow css rule because it does nothing.



.home {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    max-width: 960px;
}

.home .center {
    position: absolute;
    width: 100%;
    bottom: 0;
    top:30px;
    text-align: center;
}
+2


source


Try the following:

HTML code:

<div class="home">
   <div class="center">
     <a class="arrow fa fa-long-arrow-down fa-3x" href="#"></a>
  </div>
</div>

CSS code:

.home {
     margin: 0 auto;
     height: 100%;
     width: 100%;
     position: relative;
     margin: 0 auto;
     max-width: 960px;
 }

.home .center {
    position: absolute;
    bottom: 0;
    top:30px;
    text-align: center;
}

.arrow {    
}
+1


source


This should work, try it.

   .home {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 auto;
    max-width: 960px;
}

.center {
    position: relative;
    bottom: 0;
    top:30px;
    text-align: center;
}
.arrow
     left: 0;
    right: 0;

As an explanation as to why this works: well, the wrapper div must be absolute, and its content must be relative to the position of whatever is inside the wrapper, however you please. This way it will be easier for you if you want to add additional relative divs

+1


source


I just went over to your CSS and it works great.

.home {
    margin: 0 auto;
 }

.home .center {
  margin: 0 auto;
  text-align: center;
}
.arrow
   margin: 0 auto;    
}

Hooray!

+1


source






More articles:


All Articles