Позиционирование средствами CSS

Позиционирование на основе плавающих элементов. Центрирование

Позиционирование на основе плавающих элементов.

Не существует такого вида позиционирования как "плавающий", и "плавающие" элементы должны быть позиционированы статически (что автоматически достигается при отсутствии определения свойства position ). Однако свойство float позволяет модифицировать нормальный поток ещё одним способом. "Плавающий" (floating) элемент примыкает к левой ( float:left ) либо правой ( float:right ) границе своего контейнера, а последующие элементы (как блочные, так и строчные) обтекают его с противоположной стороны. Это нашло чрезвычайно широкое применение в CSS-вёрстке (об этом говорится в "Табличная и бестабличная вёрстка" ).

div {
      width: 40%;
      float: left;
      margin: 3px;
      padding:3px;
      border:solid 1px blue;
      color:Blue;
    }
  ...
  <div>
    Это плавающий контейнер div - Lorem ipsum... </div>
  <div>
    Это плавающий контейнер div - Lorem ipsum ...</div>

Рис. 6.4. Плавающий блочный элемент и обтекающий его блочный элемент

.floating {
      float: right;
      width: 40%;
      margin-right: 3px;
      padding: 3px;
      border: solid 1px blue;
      color: Blue;
    }
  ... 
  <div>
 
    <div class="floating">
      Это плавающий контейнер div - Lorem ipsum...
    </div>
 
    Это текст, обтекающий плавающий контейнер - Lorem ipsum ...
  </div>

Рис. 6.5. Плавающий блочный элемент и обтекающий его слева текст

Центрирование элементов на странице

Если задать блочному элементу значение auto в свойствах margin-left и margin-right, то он центрируется по горизонтали в своём контейнере. При этом у элемента должна быть задана ширина. Для старых браузеров (IE5-) этот приём не срабатывает, и тогда применяются менее изящные способы. Чтобы центрировать строчный элемент (например, img), его обычно помещают в блочный (либо назначают ему свойство display:block, тем самым делая блочным его самого).

Для вертикального центрирования применяют другую технологию: позиционируют блочный элемент абсолютно левым верхним углом в центр экрана ( top:50%; left:50%; ) и затем смещают влево и вверх путём задания отрицательных отступов.

div {
      margin-left: auto;
      margin-right: auto;
      width: 300px;
      background: #ccc;
    }
  ...
  <div>
    Если задать блочному элементу значение auto в свойствах margin-left и
    margin-right, то он центрируется по горизонтали в своём контейнере...
  </div>

Рис. 6.6. Горизонтальное центрирование разметки

img {
        width:747px;
        height:500px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-250px;
        margin-left:-373px;
    }
  ...
   <div>
    <img src="Cypripedium M.jpg" alt="Cypripedium macranthos Sw" />
  </div>

Рис. 6.7. Вертикальное центрирование