Блочный элемент, выровненный по горизонтали по центру и минимально возможная ширина - PullRequest
Новая
       36

Блочный элемент, выровненный по горизонтали по центру и минимально возможная ширина

0 голосов
/ 02 апреля 2010

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

a#button-link {
    background: url("images/button-link.png") no-repeat scroll center left;
    margin: 12px auto 0 auto;
    display: block;
    width: 125px;
    height: 32px;
    line-height: 32px;
    padding-left: 35px;
    font-weight: bold;
}

Это мой текущий код ... Идея заключается в том, что текст для этого тега может быть немного больше или меньше в зависимости от языка пользователя и количества символов в том же предложении для языка этого конкретного пользователя. Я никак не могу контролировать, но все же хотел бы, чтобы этот элемент был горизонтально выровнен по центру.

Возможно ли это с помощью CSS?

1 Ответ

3 голосов
/ 02 апреля 2010

Использование display:table.

Обновление 

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

...