CODEWITHSUNDEEP
htmlcss
djdanster
djdanster

Reputation: 51

css center div not working

I want to center the speaker div, which is within the review div. i cannot seem to get it working. :(

HTML:

<div class="review">
<div class="speaker">
<p>SPEAKER DIV</p>
</div>
</div>

CSS:

.speaker{
align:center;
}

This doesn't work :/

Upvotes: 5

Views: 24289

Answers (8)

Skykid Felix
Skykid Felix

Reputation: 194

Give the parent a text-align: center; Then you can move the child anywhere in the parent div 

.speaker {
       margin: 0 auto;

Upvotes: 1

Ritesh
Ritesh

Reputation: 54

It work perfectly.

.speaker{ 
margin: 0 auto;
text-align:center;
width:100%;

}

good luck

Upvotes: 1

Zach Lesperance
Zach Lesperance

Reputation: 347

I'm about a year late to the party, but here goes:

In most browsers, this will work:

.speaker{
    margin: 0 auto;
}

However, in IE8 and below, the margin:auto will not work (IE8 only if there is no !DOCTYPE declaration. See W3Schools Horizontal-Align Tutorial)

In that case, you can use a combination of text-align: center and width to get the desired effect:

.review{
    text-align:center;
}
.speaker{
    text-align:left;
    width:200px;
    margin:0 auto;
}

The downside to this method is that you have to declare a width, or it won't be centered.

Good luck!

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29160

Thats because that syntax does not exist. You need to center the div via the margin attribute.

.speaker{
    margin:0px auto 0px auto;
}

DEMO http://jsfiddle.net/t4kBj/

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98786

There’s no such CSS property as align.

When you say you want to “center” the speaker div, what exactly do you mean?

You can center-align its text like this:

.speaker {
    text-align:center;
}

(See http://jsfiddle.net/pauldwaite/X7LN5/)

If, alternatively, you want the speaker div to only be as wide as its text, and be positioned in the center of the review div, then you’d need to use this:

.review {
    text-align:center;
}

.speaker {
    display:inline-block;
}

(See http://jsfiddle.net/wxha4/)

Upvotes: 8

firefox1986
firefox1986

Reputation: 1612

Give it a width and margin:0 auto;

<div class="review">
    <div class="speaker">
        <p>SPEAKER DIV</p>
    </div>
</div>

div.speaker{
    background-color:red;
    width:100px;
    margin:0 auto;
}

See it in action!

Upvotes: 9

Quentin
Quentin

Reputation: 943128

There is no align attribute in CSS. Set the horizontal margins to auto to centre a block. See Centring using CSS for more details (including work arounds for Internet Explorer issues)

Upvotes: 0

Headshota
Headshota

Reputation: 21449

try

.speaker p{
text-align:center;
}

or

.speaker {
 text-align:center;
 }

Upvotes: 0

Related Questions