ansaurus

Question

How to center a block element without knowing its width?

Answer 1

+1 A:

At first, after pondering your problem I thought it was somewhat impossible. But then I realized you could take advantage of the way images are displayed and work within the browser. Try the following code and see if it works for your purposes:

<html>
<head>
    <title>Gallery</title>
    <style type="text/css" media="screen">
        body {

        }
        div {
            text-align:center;
        }
        .thumb {
            display:inline;
            margin:5px;
        }
    </style>
</head>
<body>
    <div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
        <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div>
    </ul>
</body>

You could, if you wanted to, even remove the container around the images. But it leaves it open for some sort of caption.

Sam152 2010-08-01 10:37:41

Answer 2

A:

You can still use lists, by adding the "display: inline-block" to li elements themselves

<html>
<head>
<title>Gallery</title>
<style type="text/css" media="screen">
    body {
        text-align: center;
    }
    ul {
        padding: 0;
        list-style-type: none;
        width:100%;
    }
    li {
        width: 200px;
        display:inline-block;
        background-color: violet;
    }
</style>
</head>
<body>
<ul>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li>
    <li>thumbnail</li><li>thumbnail</li>
</ul>
</body>
</html>

pop850 2010-08-01 10:43:30

ansaurus

tags:

views:

answers:

How to center a block element without knowing its width?

related questions