CSS динамическое выравнивание текста в зависимости от длины текста - PullRequest
Новая
       9

CSS динамическое выравнивание текста в зависимости от длины текста

1 голос
/ 29 февраля 2012

Допустим, я хотел бы охватить следующий сценарий 2 (заголовок динамический): это может быть достигнуто только с помощью CSS (без JS) для IE8 +?

Сценарий A: выравнивание короткого заголовка заголовкапо центру относительно ширины страницы 

| back button |                 short Title                             |
<-----------------------------------|----------------------------------->

Сценарий B: очень длинный заголовок заголовка, чтобы заполнить область содержимого заголовка без наложения на кнопку возврата 

|             | Very very very very very very very very very very very  |
| back button | Very very very very very very very very long Title      |
<-----------------------------------|----------------------------------->

1 Ответ

0 голосов
/ 29 февраля 2012

Я могу придумать два способа:

Переместить кнопку «Назад» влево, и заголовок будет естественным.

HTML 

<div>

    <a href="#" class="back">Back</a>

    <h1>Title</h1>

</div>

CSS 

div {
    text-align: center;
}

a.back {
    float: left;
    margin-right: 20px;
}

Или так, тот же HTML - только что понял, что это не будет правильно центрировать вещи, если у вас не будет того же отступа 100px с правой стороныа также. 

div {
    position: relative;
    min-height: 30px;
    padding-left: 100px;
    text-align: center;
}

a.back {
    position: absolute;
    top: 50%; left: 0;
    width: 90px;
    height: 30px;
    margin-top: -15px;
}

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

Надеюсь, это поможет:)

...