Как центрировать элемент блока, не зная его ширины? - PullRequest
Новая
       1

Как центрировать элемент блока, не зная его ширины?

1 голос
/ 01 августа 2010

Приведенный ниже код отлично работает при 1280x800, однако, если я добавлю еще одну миниатюру, ширина <ul> станет равной ширине <body>, а <ul> больше не будет центрироваться.Я не хочу указывать ширину <ul>, которая решит проблему.Я хочу, чтобы миниатюры занимали все свободное пространство независимо от разрешения, но в то же время имели одинаковые поля слева и справа.Есть ли какой-нибудь чистый способ сделать это без вычисления ширины <ul> в JavaScript при каждой загрузке страницы или с использованием медиазапросов CSS3? 

<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>

Ответы [ 2 ]

1 голос
/ 01 августа 2010

Вы все еще можете использовать списки, добавив «display: inline-block» к самим элементам li 

<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>
1 голос
/ 01 августа 2010

Сначала, после обдумывания вашей проблемы, я подумал, что это несколько невозможно.Но потом я понял, что вы можете воспользоваться тем, как изображения отображаются и работают в браузере.Попробуйте следующий код и посмотрите, работает ли он для ваших целей: 

<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>

Вы можете, если хотите, даже удалить контейнер вокруг изображений.Но это оставляет его открытым для какой-то подписи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...