Center with css margin auto

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin — Individual Sides

CSS has properties for specifying the margin for each side of an element:

All the margin properties can have the following values:

• auto — the browser calculates the margin
• length — specifies a margin in px, pt, cm, etc.
• % — specifies a margin in % of the width of the containing element
• inherit — specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a

element:

Margin — Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

If the margin property has four values:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

  Example

  Use the margin shorthand property with four values:

  If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

    Example

    Use the margin shorthand property with three values:

    If the margin property has two values:

    • margin: 25px 50px;
      • top and bottom margins are 25px
      • right and left margins are 50px

      Example

      Use the margin shorthand property with two values:

      If the margin property has one value:

      Example

      Use the margin shorthand property with one value:

      The auto Value

      You can set the margin property to auto to horizontally center the element within its container.

      The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

      Example

      The inherit Value

      Example

      div <
      border: 1px solid red;
      margin-left: 100px;
      >

      All CSS Margin Properties

      Property	Description
      margin	A shorthand property for setting all the margin properties in one declaration
      margin-bottom	Sets the bottom margin of an element
      margin-left	Sets the left margin of an element
      margin-right	Sets the right margin of an element
      margin-top	Sets the top margin of an element

      Источник

      Центрирование горизонтальное и вертикальное

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

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

      text-align

      Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

      Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

      margin: auto

      Блок по горизонтали центрируется margin: auto :

      В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

      Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

      Вертикальное

      Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

      Есть три основных решения.

      position:absolute + margin

      Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

      Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.

      Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

      Если мы знаем, что это ровно одна строка, то её высота равна line-height .

      Приподнимем элемент на пол-высоты при помощи margin-top :

      При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

      Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

      Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

      Одна строка: line-height

      Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

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

      Таблица с vertical-align

      У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

      В таблицах свойство vertical-align указывает расположение содержимого ячейки.

      baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

      Например, ниже есть таблица со всеми 3-мя значениями:

       table < border-collapse: collapse; >td 
       
      top
       
      middle
       
      bottom
       
       

      Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

      Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

       
      Кнопка
      с любой высотой
      и шириной 

      Этот способ замечателен тем, что он не требует знания высоты элементов.

      Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

      Чтобы его растянуть, нужно указать width явно, например: 300px :

       
      Кнопка
      с любой высотой
      и шириной 

      Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

      Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

       
       
      Кнопка
      с любой высотой
      и шириной 
       

      Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

      Центрирование в строке с vertical-align

      Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

      В этом случае набор значений несколько другой:

      Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

      Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

      Работает во всех браузерах и IE8+.

      Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

      Центрирование с vertical-align без таблиц

      Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

      Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

       .before < display: inline-block; height: 100%; vertical-align: middle; >.inner 
       Центрированный
      Элемент 

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

      Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

       .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; >/* добавим горизонтальное центрирование */ .outer 
       Центрированный
      Элемент 

      В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

      Это происходит потому, что центрируется весь текст, а перед inner находится пробел, который занимает место.

      1. Убрать лишний пробел между div и началом inner , будет .
      2. Оставить пробел, но сделать отрицательный margin-left у inner , равный размеру пробела, чтобы inner сместился левее.

       .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; margin-left: -0.35em; >.outer 
       Центрированный
      Элемент 

      Центрирование с использованием модели flexbox

      Данный метод поддерживается всеми современными браузерами.

        
       Центрированный
      Элемент 

      • Не требуется знания высоты центрируемого элемента.
      • CSS чистый, короткий и не требует дополнительных элементов.

      Итого

      Обобщим решения, которые обсуждались в этой статье.

      Для горизонтального центрирования:

      • text-align: center – центрирует инлайн-элементы в блоке.
      • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

      Для вертикального центрирования одного блока внутри другого:

      Если размер центрируемого элемента известен, а родителя – нет

      Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

      Если нужно отцентрировать одну строку в блоке, высота которого известна

      Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

      Высота родителя известна, а центрируемого элемента – нет.

      Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

      Высота обоих элементов неизвестна.

      1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
      1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
      2. Решение с использованием flexbox.

      Источник

      CSS Layout — Horizontal & Vertical Align

      Setting the width of the element will prevent it from stretching out to the edges of its container.

      The element will then take up the specified width, and the remaining space will be split equally between the two margins:

      This div element is centered.

      Example

      Note: Center aligning has no effect if the width property is not set (or set to 100%).

      Center Align Text

      To just center the text inside an element, use text-align: center;

      Example

      Tip: For more examples on how to align text, see the CSS Text chapter.

      Center an Image

      To center an image, set left and right margin to auto and make it into a block element:

      

      Example

      Left and Right Align — Using position

      One method for aligning elements is to use position: absolute; :

      In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

      Example

      Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

      Left and Right Align — Using float

      Another method for aligning elements is to use the float property:

      Example

      The clearfix Hack

      Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the «clearfix hack» to fix this (see example below).

      Without Clearfix

      

      With Clearfix

      

      Then we can add the clearfix hack to the containing element to fix this problem:

      Example

      Center Vertically — Using padding

      There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding :

      Example

      To center both vertically and horizontally, use padding and text-align: center :

      I am vertically and horizontally centered.

      Example

      Center Vertically — Using line-height

      Another trick is to use the line-height property with a value that is equal to the height property:

      I am vertically and horizontally centered.

      Example

      .center <
      line-height: 200px;
      height: 200px;
      border: 3px solid green;
      text-align: center;
      >

      /* If the text has multiple lines, add the following: */
      .center p line-height: 1.5;
      display: inline-block;
      vertical-align: middle;
      >

      Center Vertically — Using position & transform

      If padding and line-height are not options, another solution is to use positioning and the transform property:

      I am vertically and horizontally centered.

      Example

      .center <
      height: 200px;
      position: relative;
      border: 3px solid green;
      >

      .center p margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      >

      Tip: You will learn more about the transform property in our 2D Transforms Chapter.

      Center Vertically — Using Flexbox

      You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:

      Example

      .center <
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      border: 3px solid green;
      >

      Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.

      Источник

      Читайте также:  Python if assignment one line