CODEWITHSUNDEEP
htmlcss
people
people

Reputation: 75

How do I center the contents in this div?

Here is a link: http://jsfiddle.net/zCXMv/18/

I can not figure out how to get this working. Please help.

HTML:

<div id="button" >
    <a class="button1 active" rel="1"></a>
    <a class="button2" rel="2"></a>
    <a class="button3" rel="3"></a>
    <a class="button4" rel="4"></a>
</div>

CSS:

.button1,
.button2,
.button3,
.button4    {
    background:#999;
    padding:6px;
    display:block;
    float:left;
    margin-right:5px;
}

#button {
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 0

Views: 66

Answers (5)

user3968801
user3968801

Reputation:

Try this.It may work:

#button a{display:block;margin:0 auto !important;text-align:center !important;}

Upvotes: 0

Seth
Seth

Reputation: 1373

Remove the "display: block" and "float:left" on the buttons, and add "text-align: center" to the #button definition.

Display "inline-block" is not supported in all browsers, so I would recommend not using this unless you absolutely have to.

Upvotes: 0

user3968801
user3968801

Reputation:

Try this :

#button a{
display:block;
 margin:auto;}

Upvotes: 0

Luke
Luke

Reputation: 4063

http://jsfiddle.net/zCXMv/19/

I made the buttons display: inline-block, removed the floats and added text-align: center to the parent.

.button1,
.button2,
.button3,
.button4
{
    background:#999;
    padding:6px;
    display: inline-block; // Changed from "block"
    margin-right:5px;
    // Removed floats    
}

#button
{
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; // Added central alignment to content
}
<div id="button" >
    <a class="button1 active" rel="1"></a>
    <a class="button2" rel="2"></a>
    <a class="button3" rel="3"></a>
    <a class="button4" rel="4"></a>
</div>

Upvotes: 3

Carca
Carca

Reputation: 594

Try this css

.button1,
.button2,
.button3,
.button4    {
    background:#999;
    padding:6px;
    display:block;
    float:left;
    margin-right:5px;
}

#button {
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin: 0px auto;
}

Upvotes: 0

Related Questions