Center elements within absolutely positioned div

Question

I have the following HTML:

<div id="hasToBeAbsolute">
  <a></a>
  <a></a>
  <a></a>
</div>

Styled as follows:

#hasToBeAbsolute {
  position: absolute;
  display: table;
  margin: 10px auto 0;
}

#hasToBeAbsolute a {
    background: rgba(200, 200, 200, 0.8);
    margin-left: 10px;
    width: 12px;
    display: block;
    float: left;
    height: 12px;
    font-size: 0;
    border-radius: 50%;
}

codepen

I want to center the 3 "a" tags within the div like this

However I have the following constraints:

the outer wrapper must be absolutely positioned
I can only use LESS/CSS.
I can't add or remove any HTML.
The width of the container must remain dynamic ("a" tags could be added or removed via JS)

Is this possible?

Possible duplicate of [How to center absolute element in div?](http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div) — Ason, Dec 28 '15 at 19:36

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

Add this to your code and it will work:

#hasToBeAbsolute {
...
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

(You can also choose a smaller width)

Demo: http://codepen.io/anon/pen/jWVbQy

From: https://stackoverflow.com/a/8273750/4339170

Other option without a fixed width:

#hasToBeAbsolute {
...
  left: 50%;
  transform: translate(-50%, 0);
}

http://codepen.io/anon/pen/XXNmOE

From: https://stackoverflow.com/a/23384995/4339170

edited May 23 '17 at 11:45

Community

1
1

answered Dec 28 '15 at 19:24

CoderPi

11,946
4
28
58

I forgot to mention that the width must be dynamic so "width: 100px" wont work. I did upvote though because it works as question was originally asked – HelloWorld Dec 28 '15 at 19:27
You reference a duplicate and not vote to close ??? .. I deleted my answer and voted to close for dup, so should you. -1. – Ason Dec 28 '15 at 19:38
@LGSon because I wanted show the fiting option, and I wanted to learn it myself how to do it, so I did it. Also it wasn't the exact same problem as in the other Post. But I will vote for doublicate if you remove the -1 – CoderPi Dec 28 '15 at 19:41
Then you post the answer as a community wiki, telling exactly why you posted and only whats missing in the dupe, everything else is in the dupe. – Ason Dec 28 '15 at 19:43
@LGSon in future I wont link to where I found inspiration, because guys like you will harm my answers, instead of honoring the work i put together – CoderPi Dec 28 '15 at 19:46
1

I want to mention that in the mentioned SO post, the question is different and the solution I accepted was not the accepted answer in the other post (which I don't view as a duplicate since the question is different) – HelloWorld Dec 28 '15 at 19:47
You don't earn any reps. for either accept or up votes., as you should not, as there is already an answer, the dupe, that should earn on it. – Ason Dec 28 '15 at 19:47
@CodeiSir- well I think it was a good answer and I learned something important so at least know that – HelloWorld Dec 28 '15 at 19:48
@LGSon I never tryed to change your optionion, guys like you wont change their opinoin. I know these personalitys very well – CoderPi Dec 28 '15 at 19:50
@HelloWorld So you would by reading the duplicate, and this is a site policy, to vote to close when there is an answer already, and it has not to be the accepted answer that decides if it is a dupe or not, it is the question. – Ason Dec 28 '15 at 19:50
@LGSon thats not a reason to downvote other posts. It's OK to mark this as "doublicate" but not to downvote answers! – CoderPi Dec 28 '15 at 19:51
1

@LGSon I wasn't able to find what you call a "duplicate" when I looked for a solution here before asking because it addresses a different problem without the constraints I mentioned. Sometimes the same solution works for more that one problem. That doesn't mean the question is a duplicate. So if you think it is duplicate vote as such and see if it gets removed. I disagree personally but it isn't up to me. I don't see why downvote a perfectly good and relevant answer just because it also addresses another question – HelloWorld Dec 28 '15 at 19:52
I down vote your answer as you didn't close to vote a dupe, which is site policy, and it is my right doing so and also telling you that I did. – Ason Dec 28 '15 at 19:52
@HelloWorld My discussion here has nothing to do with your question. Nobody require someone to find a dupe so you are completely of the hook, it is _CodeiSir_ who should know what site policy is for and follow them, which he didn't. – Ason Dec 28 '15 at 19:55
@HelloWorld marking as doublicate won't hurt anybody, it will just point to the *general* solution, so it would be OK to link that post to the other post. But if there is a more specific solution I dont see the reason, it can be seen as doublicate or not. But this is not like it is exactly the same question and it would have to be marked as doublicate. It's up to the option of the other users – CoderPi Dec 28 '15 at 19:55
@LGSon I only found that when writing my solution as addion to it. But yeah as I already said, people like you are perfect and never change their mind – CoderPi Dec 28 '15 at 19:56
I changed my mind and deleted a prefect answer as it has a dupe and voted for close. – Ason Dec 28 '15 at 19:59
@LGSon yeah thats totaly not what I am talking about – CoderPi Dec 28 '15 at 19:59

Center elements within absolutely positioned div

1 Answers1