CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alexander
Alexander

Reputation: 4219

Appending a <div> to the horizontal center of another <div>

I'm currently trying to create a little menu that changes position as the user scrolls. I've come up for this for a style - http://jsfiddle.net/piedoom/S8tyn/

As you can see, the dots are appended to each text <div> element, and it looks like this. enter image description here

However, this looks very ugly. How can I center each dot beneath each text div? I've tried doing things like text-align: center to no avail.

Upvotes: 0

Views: 444

Answers (3)

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

Here is the answer for your question: added left and margin-left

.unselectedcircle
{
background: grey;
position: relative; 
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}

updated link

Upvotes: 0

Farkhat Mikhalko
Farkhat Mikhalko

Reputation: 3645

Just change your style to next

.unselectedcircle
{
  background: grey;
  position: relative; 
  top: 32px;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin: 0 auto;
}

Demo

Upvotes: 0

Neograph734
Neograph734

Reputation: 1754

Use the css style of margin: auto to center the child div.

http://jsfiddle.net/S8tyn/1/

Upvotes: 1

Related Questions