выравнивание div'а внутри div

[torsar]

<div class="wrapper">      <div class="inner"></div></div>

как реализовать разные варианты выравнивания для inner?

по горизонтали - слева.

по вертикали : вверху, по центру, внизу

 

тоже по горизунтали по центру и

по вертикали : вверху, по центру, внизу

и по горизонтали справа и

по вертикали : вверху, по центру, внизу

<div class="wrapper">      <span class="inner"></span></div>

и тоже для текста

(span, b, и тп)

?

[Switch74]

горизонталь и в некоторых случаях вертикаль можно выравнивать с помощью margin
так же можно использовать display:inline-block для выравнивания

[forest_moss]

Горизонталь:

 - слева значение и так по умолчанию, его не нужно отдельно задавать;

 - по середине удобнее всего при помощи margin: 0 auto (или не ноль, а сколько надо); можно еще .inner превратить в inline-block,  а для .wrapper задать text-align: center;

 - справа: при помощи float:right; или при помощи position: absolute; right:0; или при помощи inline-block для .inner и text-align:right для .wrapper.

 

Вертикаль:

тут все немного посложнее.

 - верх - значение по умолчанию;

 - середина:

1) вручную посчитать padding, если блоки не меняют высоту;

2) если все содержимое блока - текст в одну строку, то можно задать увеличенную line-height, а для внешнего блока высоту не задавать, она настроится автоматически.

3) решение, применимое всегда - это vertical-align: middle. Задаем для.inner свойства display:inline-block  ; vertical-align:middle  .

так как  middle  выравнивает не на середину внешнего блока, а на середину строки, нужно чтобы строка стала 100% от высоты внешнего блока. для этого нужно чтобы перед .inner было что-нибудь строчное (или блочно-строчное) с необходимой высотой. можно вставлять div с нулевой шириной и стопроцентной высотой, но самы й удобный метод, наверно, такой:

 .inner:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
} 

 

 - выравнивание по низу по сути не сильно отличается от выравнивания по середине:

1) вручную  padding ;

2) для текста в одну строку можно задать  line-height , а потом vertical-align: bottom; 

3) тот же трюк, что и для выравнивания по середине (который третий), только vertical-align: bottom.

 

в качестве заметки: margin-top и margin-bottom нельзя задавать в процентах, так что учитывайте это.

 

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

Edited April 10, 2015 by forest_moss