Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css center div not working

Tags:

html

css

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 :/

like image 358
djdanster Avatar asked Dec 03 '22 02:12

djdanster


2 Answers

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!

like image 84
firefox1986 Avatar answered Dec 19 '22 04:12

firefox1986


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/)

like image 36
Paul D. Waite Avatar answered Dec 19 '22 06:12

Paul D. Waite