центрирование предметов с помощью плавающего элемента div - PullRequest
1 голос
/ 08 мая 2011

Я изучаю CSS и до сих пор сумел через много-много часов создать простой макет, но все еще не знаю, как центрировать вещи (текст, блок и т. Д.) Внутри float: left div. Вот код, который я просто надеюсь, что кто-то сможет помочь, потому что я сойду с ума в очень короткое время!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <style type="text/css">
        #container {
            /* */
            border: 1px solid; 
            /* */
            padding-top: 10px;

            margin-left:auto;
            margin-right:auto;
            width: 980px;
            height: auto;
        }
        #content {
            display: inline-block;
        }
        #content .left {
            display: inline-block;
            border: 1px solid; 
            padding-left: 5px;
            padding-top: 10px;
            width:773px;
            float:left;

        }
        #content .right {
            display: inline-block;
            padding-top: 10px;
            width:200px;    
            float:right;
        }

        #content .inside-left {
           text-align: center;
           margin-left: auto;
           margin-right: auto;
        }


    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div class="left">
                <!-- i need every inside-left class center aligned -->
                <div class="inside-left">
                    <table border="1">
                        <tr>
                            <td>center align</td>
                            <td>damn it</td>
                        </tr>
                    </table>

                </div>

            </div>
            <div class="right">
                test
            </div>
        </div>
    </div>
</body>

edit: ой, а почему ** css так сложно понять? это только у меня ??

Ответы [ 2 ]

5 голосов
/ 08 мая 2011

Просто небольшая модификация CSS имеет огромное значение:

Изменить это:

#content .inside-left {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

К этому:

#content .inside-left, #content .inside-left > * {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Смотри разницу: http://jsfiddle.net/8JfNF/1/

Этот селектор CSS, #content .inside-left > *, выбирает всех прямых потомков (не внуков) .inside-left и применяет к ним тот же CSS.

0 голосов
/ 08 мая 2011

CSS не так уж и сложен, я думаю, что это самая простая логическая вещь в мире веба ... попробуйте поучиться на каком-нибудь хорошем веб-сайте ..

и есть предложение для вас ..

  • лучше использовать класс вместо id
  • всегда пишите 4 основных свойства таблицы ширина, ячейка, пробел и граница
  • для горизонтального центрирования объектов внутри td используйте text-align:center;, чтобы сделать вертикальный центр записи vertical-align:middle

чтобы узнать трюки CSS см. Мои закладки ... это наверняка поможет вам

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