CODEWITHSUNDEEP
csscss-positionabsolute
user2684452
user2684452

Reputation: 731

How to absolute position an element with percentages?

I have an element that I'm trying to absolute position to the center and right near the bottom. Whether I do 50% from right or left, seems to be slightly off center.

In this screenshot you can see that it's a little to the left from center.

enter image description here

a.down {
    font-size:70px;
    color:#fff;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
}
<a href="#we-are-the-leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

Upvotes: 1

Views: 5221

Answers (6)

Terry
Terry

Reputation: 66093

If you are willing to use CSS transforms, the solution is extremely straight forward:

a.down {
    font-size:70px;
    color:#fff;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

As transformation percentages are computed based on the dimensions of the element, using a positive 50% translation along the x-axis simply repositions the element to the right, of half of its computed width—achieving the perfect horizontal alignment.

If you're using left: 50%, use a negative value for the translation instead.

Upvotes: 6

dvlden
dvlden

Reputation: 2462

Here are four possible ways that I can think of...

  1. Use calc() on left position. You need to know element's width...
  2. Use translateX() on left position and add negative percentage. No need to know element's width.
  3. Use simple margin-left if left position and set it to negative half of element's width. You need to know element's width...
  4. Set left & right to 0 and use margin: auto. No need to know element's width...

Examples (all elements are one above another, because of same positions)

CodePen Demo

a.down {
  font-family: 'FontAwesome';
  position: absolute;
  bottom: 5%;
  font-size: 70px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.down:before {
  content: "\f107";
}

a.down-1 {
  left: calc(50% - 22.5px);
}

a.down-2 {
  left: 50%;
  transform: translateX(-50%);
}

a.down-3 {
  left: 50%;
  margin-left: -22.5px;
}

a.down-4 {
  left: 0;
  right: 0;
  margin: auto;
}

Upvotes: 2

user1389087
user1389087

Reputation:

Here's my guess : Try wrapping your 'a' tag into a div "flexed into 1" and margined 0 vertically and some % horizontally (try to find your best % to center the div !) just like this : 

.center{flex : 1;
margin:0 30%;}

with your HTML inside this :

<div class="center"></div>

Try it out.

https://jsfiddle.net/LsgL07en/46/

Upvotes: 1

technophobia
technophobia

Reputation: 2629

This solution will center any content you place in the wrapper.

HTML:

<div class="my-class">
    <a href="#we-are-the-leader" class="down">
        <i class="fa fa-angle-down"></i>
    </a>
</div>

CSS:

.my-class {
    font-size:70px;
    text-align: center;
    bottom:5%;
    position: absolute;
    width: 100%;
}

Notice: Width is set to 100%.

Upvotes: 1

Stickers
Stickers

Reputation: 78676

You could use the absolute position tricks as follows.

body {
    background: navy;
}
a.down {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    margin: auto;
    display: table;
    font-size: 70px;
    color: #fff;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<a href="#we-are-the-leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

Upvotes: 1

Jeroen
Jeroen

Reputation: 63699

If you position absolutely like that you will position the edge of your element relative to the right side. You must adjust for the width of your element using a margin, e.g.:

margin-right: -35px;

However, this does require you to know the width of your item.

Demo:

a.down {
    font-size:70px;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
}

/* Added for demo: */
.fa-angle-down:before { 
  content: '■';
}

a.down {
    border: 1px solid red;
    width: 70px;
    margin-right: -35px;
}
<a href="#we-are-the-leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

Upvotes: 1

Related Questions