ansaurus

Question

CSS, centered div, shrink to fit?

Answer 1

+2 A:

Koistya Navin 2009-03-27 16:15:45

+1 DIV is just the wrong element for this.

Aaron Digulla 2009-03-27 16:30:38

Well, agreed, but you're adding unnecessary elements as well (span).

Seb 2009-03-27 16:50:55

This doesn't work either ;)

Seb 2009-03-27 16:55:56

It works, I can make a screenshot :)

Koistya Navin 2009-03-27 17:24:40

Answer 2

A:

Something like this?

<html>
<head>
</head>
<body style="text-align: center;">

   <div style="width: 500px; margin: 0 auto;">

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

       <div>hello</div>

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

   </div>


</body>

David Caunt 2009-03-27 16:19:12

Answer 3

+4 A:

DIV elements are block-level by default, which means they automatically get 100% width. To change that, use this CSS...

.centerBox {
  display:inline-block;
  text-align:center;
}


<div class="centerBox">
  Some text
</div>

EDIT: Updated to use a CSS class rather than inline attribute and changed "block" to "inline-block"

Josh Stodola 2009-03-27 16:21:02

‘width: auto’ is redundant and can be omitted. You'd also need to set text-align-center on the parent, obviously. A technically correct approach, although possibly mutating a div to inline isn't quite what the OP wanted!

bobince 2009-03-27 16:59:10

This doesn't quite work, since if you do have multiple lines of text, any formatting (borders, padding, etc.) are applied to each separate part. But inline-block DOES work! Yay!

dirtside 2009-03-27 16:59:26

See author's response below.

dirtside 2009-03-27 17:01:00

you can replace it with "span" element and then you won't need to specify "display: inline: width: auto"but your solution doesn't place "some text" in the center

Koistya Navin 2009-03-27 17:26:55

"inline-block" doesn't work in all browsers.

Koistya Navin 2009-03-28 09:10:38

Answer 4

+1 A:

Props to Josh Stodola, although he wasn't exactly right. The property needed is:

display: inline-block;

Which has solved my problem. Yay!

dirtside 2009-03-27 17:00:36

inline-block doesn't work in some browsers. Don't use it if you need cross-browser support.

Koistya Navin 2009-03-27 17:32:00

ansaurus

tags:

views:

answers:

CSS, centered div, shrink to fit?

related questions