Центр одного из двух братьев и сестер - PullRequest
Новая
       12

Центр одного из двух братьев и сестер

8 голосов
/ 05 декабря 2008

В дальнейшем я хотел бы изменить CSS так, чтобы right-sibling был истинно с центром в container div. (Изменить: без использования абсолютного позиционирования). 

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
      }
      #right-sibling {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>

В текущей реализации на центрирование правого родного брата влияет левый родной брат - это можно увидеть, добавив display: none к стилю left-sibling.

(Примечание: я бы хотел избежать изменения структуры HTML, потому что, насколько я понимаю, весь смысл CSS состоит в том, чтобы отделить структуру тегов от логики представления, и это не похоже на действительно сумасшедший запрос для CSS для обработки.)

ТИА.

Ответы [ 5 ]

6 голосов
/ 05 декабря 2008

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

Чтобы завершить картину, мы также поместили отступ справа от контейнера, равный ширине левого брата. 

<html>
  <head>
      <style type='text/css'>      
        #container {
            width: 500px;
            padding-left:50px;
            padding-right:50px;     
            }      
        #left-sibling {
            border: solid 1px #000;
            float: left;
            width:50px;
            margin-left:-50px;  
        }      
        #right-sibling {
            border: solid 1px #000;
            text-align: center;

        }
        #container2 {
            width: 500px;   
            }  
</style>
  </head>
    <body>
        <div id='container'>      
            <div id='left-sibling'>Spam</div>
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container'> 
            <div id='left-sibling' style="display:none;">Spam</div>    
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container2'> 
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
      </body>
</html>
2 голосов
/ 05 декабря 2008

Попробуйте установить ширину для левого брата и равную ширину справа: для правого брата

вроде так 

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
        width:50px;
      }
      #right-sibling {
        text-align: center;
        padding-right:50px;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>
1 голос
/ 05 декабря 2008

Вы должны всегда устанавливать ширину для плавающих элементов, в противном случае все становится странным:)

Если поставить 

border: solid 1px #000;

Правило для обоих div'ов вы увидите, что происходит - div # right-sibling заполняет всю ширину родительского div (#container), поэтому, хотя текст равен , фактически выровнен по центру, похоже, что нет!

1 голос
/ 05 декабря 2008

Атрибут text-align управляет выравниванием содержимого в контейнере, к которому применяется атрибут. При добавлении следующих стилей это легко увидеть: 

#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

Я бы предложил добавить в документ doctype, чтобы избежать quirksmode 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

и следующие стили: 

#container { width: 500px; position:relative; border:1px Solid Black; }
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; }
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

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

1 голос
/ 05 декабря 2008

Вы можете изменить float: left; на #left-sibling на position: absolute;. Это выведет его из нормального потока, так что это больше не повлияет на правильного брата.

Конечно, это может иметь другие побочные эффекты с вашим дизайном.

...