ansaurus

Question

Block element, horizontal center aligned and minimum width possible

Answer 1

+1 A:

Use display:table.

Update

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>display:table</title>
<style>
div
    {
        display:            table;
        border-collapse:    collapse;
        border:             1px solid #950;
        margin:             100px auto;
    }
* html div
    { /* IE 6. If anybody finds a good solution for IE 7: Tell me! */
        width:              .1em;
    }
* + html div
    { /* IE 7 Hack. Not perfect. */
        float:              left;
        margin:             100px auto 100px 45%;
    }
</style>

<div>Some Text.</div>

Live Demo

toscho 2010-04-01 22:14:12

That won't work in IE(6?) though, will it?

crimson_penguin 2010-04-01 22:16:01

Even if it works, is it OK to do it? I mean, I'm using divs and CSS so I avoid tables and now I set the display property to a table? A bit ironic...

Nazgulled 2010-04-01 22:18:28

Just checked, it doesn't work with IE6 but I don't I care. IE9 it's already in the works, that's 3 new versions, time to update people.

Nazgulled 2010-04-01 22:29:02

@Nazgulled CSS never changes the semantics of Text, while markup does. That’s the difference between HTML tables and the CSS property.

toscho 2010-04-01 22:43:52

ansaurus

tags:

views:

answers:

Block element, horizontal center aligned and minimum width possible

related questions