How to center a block element without knowing its width?_问答_开发者

How to center a block element without knowing its width?

开发者 https://www.devze.com 2023-01-09 14:11 出处：网络

The code below works fine at 1280x800, however, if I add another thumbnail, the width of the <ul> becomes equal to the <body> width and <ul> isn\'t centered anymore. I don\'t want to

相关专题：css

The code below works fine at 1280x800, however, if I add another thumbnail, the width of the <ul> becomes equal to the <body> width and <ul> isn't centered anymore. I don't want to specify the <ul> width, which would solve the problem. I want thumbnails to occupy all free space regardless of resolut开发者_JS百科ion, but at the same time having equal margins on the left and right. Is there any pure CSS way of doing this without calculating the <ul>'s width in JavaScript each time the page loads or using CSS3 media queries?

<html>
<head>
    <title>Gallery</title>
    <style type="text/css" media="screen">
        body {
            text-align: center;
        }
        ul {
            padding: 0;
            display: inline-block;
            list-style-type: none;
        }
        li {
            float: left;
            width: 200px;
            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>
    </ul>
</body>

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>

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.