Центрируйте одно из двух родственных подразделений

StackOverflow https://stackoverflow.com/questions/343282

  •  19-08-2019
  •  | 
  •  

Вопрос

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

<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.)

ТИА.

Это было полезно?

Решение

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

Для полноты картины мы также нанесли отступ справа от контейнера размером, равным ширине левого родственного элемента.

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

Другие советы

Попробуйте установить ширину по левому краю-sibling и равное заполнение-right:справа-родной брат

вот так

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

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

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

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

Если вы поставите 

border: solid 1px #000;

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

Атрибут 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; }

Вы, конечно, хотели бы настроить размер братьев и сестер в соответствии с вашими потребностями.The borders отлично справляется с задачей, показывая, что происходит на самом деле.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top