CODEWITHSUNDEEP
css
spraff
spraff

Reputation: 33395

css want p to have width less than max width when set

I need to set width or max-width in order for margin:auto to work, right? Like in this jsFiddle.

Trouble is, the paragraph width is equal to max-width and so the block of text is not properly centered.

How can I make the width of the paragraph contract to be only just big enough to contain the text, expanding to max-width as necessary?

No javascript and no fixed widths. Thanks.

Upvotes: 0

Views: 745

Answers (3)

bfavaretto
bfavaretto

Reputation: 71918

I'm not sure, but maybe an inline-block paragraph is what you're looking for:

<div>
    <p>Lorem ipsum dolor sit amet</p>
</div>​

div { text-align: center; }
p { display: inline-block; text-align: left; max-width: 40ex; }

http://jsfiddle.net/wuqaH/1/

Upvotes: 2

defau1t
defau1t

Reputation: 10619

Do you want to center the text in p, why not use text-align:center; property

http://jsfiddle.net/H7qrp/5/

Upvotes: 0

el lucarnator
el lucarnator

Reputation: 15

did you try to set a max-width / or a width in percentage ?

It would be like that : 

div {
    width: 100%;
    background: red;
}

p {
    margin: 0 auto 0 auto;
    background: blue;
    max-width: 90%; }

you can try it on your jsFiddle.

Hope this will help you.

Upvotes: 0

Related Questions