CSS позиционирование - плавающая левая и центрированная проблема - PullRequest
1 голос
/ 27 января 2010

Я уверен, что это основной вопрос для тех из вас, кто регулярно работает в HTML и CSS.

У меня есть два фрагмента текста, оба должны появиться в одной ЖЕ строке - один должен быть выровнен по левому краю, а другой - по центру, независимо от того, сколько текста находится в блоке с выравниванием по левому краю длина текста, выровненного по левому краю, не превышает отметки на полпути).

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

Пожалуйста, отправьте рабочий образец, если найдете решение.

Спасибо.

<html>
<head>
    <title>Alignment Test</title>
    <style>
        body {background-color: #E6E6E6;}
        #reference {width: 100%;
                    border: solid 1px navy;}
        #half1 {width: 50%;
                text-align: right;
                border-right: dotted 1px navy}
        #container {width: 100%;
                    text-align: center;
                    border: solid 1px navy;}
        #floatLeft {float:left;
                    border: dotted 1px green;
                    background-color: #D0F5A9;}
        #centered {width: 100%;
                      border: dotted 1px red;
                      background-color: #F5F6CE;}
    </style>
</head>
<body>
    <div id="reference">
        <div id="half1">Middle of container -->&nbsp;</div>
        <div id="half2"></div>
    </div>
    <div id="container">
        <div id="centered">This text should be centered
            <div id="floatLeft">This text should be left aligned</div>
        </div>
    </div>
</body>

Ответы [ 2 ]

2 голосов
/ 27 января 2010
<div style="text-align:center;position:relative">
    Centered
    <div style="position:absolute;left:0;top:0">Left</div>
</div>
0 голосов
/ 27 января 2010

Y. Решение Шохама работает. Вот еще один, который обрабатывает обтекание содержимого более изящно (не допускает перекрытия между центральной и левой секциями), но требует изменения порядка элементов в разметке:

<div style="text-align: center; overflow: auto;">
  <div style="float: left; text-align: left;">left</div>
  centered
</div>

(text-align: left может не иметь значения, например, если ширина не указана и ничто внутри не имеет присущей ей ширины, как изображение.)

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