Center an auto-width div?

css width alignment
Dan K picture Dan K · Aug 30, 2013 · Viewed 57.7k times · Source

I'm having trouble because I have a div I want to center and what I have usually been told to do is this:

width: 700px;
margin-left: auto;
margin-right: auto;

the trouble is, this is for if you want the div to be a fixed width. I want the div to adjust its size based on the text in the div, and still be centered. I tried:

width: auto;
margin-left: auto;
margin-right: auto;

but this didn't work. It stretches the div to fill up the screen when I do this.

Anyone know what to do here?

Answer

zloctb picture zloctb · Aug 30, 2013

for parent block or body - text-align:center; for centerd block- display:inline-block;

.center{display:inline-block;background:red}
body{text-align:center}

<div class="center">
    <p contenteditable="true">write text</p>
</div>

DEMO http://jsfiddle.net/RXP4F/

Content Editable MDN

Related questions

How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to set up fixed width for <td>?

Simple scheme: <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> I need …

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More