Как выровнить по центру блок с элементами div, ul, li

Шаги

Метод 1 из 2: Горизонтальное выравнивание текста по центру


  1. 1

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

  2. 2

    Нажмите на кнопку «По центру» на верхней панели инструментов. Следуйте этим указаниям: X Источник информации

    • Взгляните на панель инструментов в верхней части окна Word (раздел с множеством опций). В левом верхнем углу должна быть выбрана вкладка «Главная» (по умолчанию). Если это не так (или вы не уверенны), нажмите на нее.
    • Затем найдите секцию «Абзац», которая находится чуть ниже и справа от вкладки «Главная». Вы увидите три небольших кнопки, напоминающие страницы с текстом, выровненным по левому краю, по правому краю и по центру.
    • Нажмите на кнопку с текстом, выровненным по центру.
  3. 3

    Отмените выделение текста.

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

    Выделенный вами текст будет выровнен точно между левым и правым краем. Теперь нажмите туда, откуда вы хотите продолжить печатать текст и продолжите работу со своим документом.

  4. 4

    Если вы еще ничего не напечатали, просто нажмите на кнопку «По центру».

    Если вы хотите добавить в конце документа выровненный по центру текст, нажмите на конец документа, нажмите клавишу Enter/Return, чтобы перейти на новую строку и нажмите на кнопку «По центру».

    Если в вашем документе пока пусто, нажмите на кнопку «По центру», следуя вышеупомянутым указаниям. Все, что вы начнете печатать, будет выровнено по центру.

  5. 5

    Вы также можете выровнять текст по центру, нажав Ctrl+E. Эта комбинация клавиш переключает выравнивание текста (по левому краю или по центру). X Источник информации

    Если вы нажмете ее, пока текст будет выделен, тогда он будет выровнен по центру (и обратно по левому краю, если вы нажмете ее снова). Если вы нажмете эту комбинацию клавиш на пустой линии, то следующее напечатанное слово будет отцентрировано.

  6. 6

    Измените выравнивание другими кнопками. Кнопки на панели инструментов рядом с кнопкой «По центру» позволят вам выбрать для текста другое выравнивание. Они действуют так же, как и кнопка «По центру». Слева направо здесь присутствуют следующие кнопки:

    • Выровнять по левому краю
    • По центру
    • Выровнять по правому краю
    • Выровнять по ширине (похоже на функцию «По центру», но с тем исключением, что слова будут растянуты так, чтобы все линии были одной ширины).

Метод 2 из 2: Вертикальное выравнивание текста по центру

1

Выделите текст, который хотите выровнять по центру.Если вы еще ничего не напечатали, пропустите этот шаг. В результате ваших действий печатаемый текст будет автоматически выравниваться вертикально. Этот метод выровняет текст точно между верхним и нижним краем страницы. Для начала, выделите текст аналогично методу горизонтального выравнивания текста.

2

Откройте меню «Макет», выполнив следующие шаги: X Источник информации

Откройте вкладку «Макет» на верхней панели (справа от вкладки «Главная», которая открывается по умолчанию). Нажмите на кнопку «Параметры страницы». В появившемся окне откройте вкладку «Источник бумаги».

3

Выберите вертикальное выравнивание по центру

Обратите внимание на поле «Вертикальное выравнивание». Выберите «По центру».


4

Примените изменения.Например, если вы выделили текст, который хотите выровнять по вертикали, не забудьте выбрать пункт «к выделенному тексту» в меню «Применить». Нажав «ОК», вы измените выравнивание и вернетесь к своему документу

Если хотите, можете задействовать функцию «Применить», чтобы выбрать, к какой части документа будет применено вертикальное выравнивание.

  • Если вы оформляете название для своего документа, в дополнение к выравниванию не помешает и увеличить и размер текста. В данной статье рассказывается об изменении размера шрифта.
  • Если вы хотите выделить важную информацию, можете применить полужирное или курсивное начертание, или подчеркнуть его вдобавок или вместо выравнивания. В стандартных настройках эти инструменты находятся слева от опций выравнивания в секции «Шрифт».

Как выровнять текст

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

Для смещения текста в программе Word есть четыре кнопки. Находятся они вверху.

— эта кнопка выравнивает текст по левому краю — вот эта выравнивает по центру — по правому краю — по ширине (делает текст ровным с двух сторон)

А теперь попробуем правильно сместить текст. Для начала напечатайте несколько слов в программе Word. Затем выделите их. Для этого наведите курсор (стрелку или палочку) в самое начало или в самый конец текста. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в другой конец. Когда текст закрасится другим цветом (обычно черным или синим), это будет означать, что он выделен.

После выделения нажмите по кнопке, которая выравнивает текст по центру. Напечатанные Вами слова должны сместиться в середину страницы.

Вам может показаться, что это неправильный центр. На самом деле, все верно. Ведь поле (отступ) с левой стороны больше, чем с правой.

Таким же способом попробуйте выровнять текст по правому краю.

Что касается кнопки «По ширине». Если у Вас немного текста (пару слов), то Вы не увидите отличий от кнопки «По левому краю» — слова так же сместятся влево. А вот если у Вас несколько абзацев, то текст выровняется по двум сторонам листа – и по левой, и по правой. То есть он будет ровным с двух сторон.

Пример текста, выровненного по левому краю:

Тот же текст, только выровненный по ширине:

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

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

Рисуем горизонтальную линию на листе бумаги. Если лист бумаги лежит на столе – лист расположен горизонтально. Рисунок линии выполняется слева направо или справа налево – нарисована горизонтальная линия. Нарисовать на листе можно что угодно: вертикальные лини (сверху вниз или снизу вверх), диагональ, любой рисунок. При этом лист расположен всё равно горизонтально. Чему? Столу. Полу. Нижнему этажу дома. Земле.

Горизонталь – самая знакомая из всех, базовая линия. Она в каких угодно смыслах служит основой любой композиции. Даже её визуальная тяжесть напоминает о том, что горизонтальная поверхность есть фундаментальная держащая основа. Она параллельна земле. Не зря изображение горизонтальной линии выражает вес, спокойствие, мир и стабильность.

Преимущества таблиц

Таблица, быть может, и не создана для построения структуры сайта, однако, она, как никакой другой элемент, удобна для вертикального позиционирования. Внутри табличной ячейки мы можем творить с контентом все, что захотим, и ничего нам за это не будет. Однако для этого нам придется полностью сымитировать HTML-таблицу средствами CSS, то есть придется добавить еще один элемент:

<div class=’wrapper’> <div class=’parent’> <div class=’child’></div> </div> </div>

1 2 3 4 5 6 7

<div class=’wrapper’>

<div class=’parent’>

<div class=’child’><div>

<div>

<div>

 

CSS

.wrapper{ display:table; } .parent{ display:table-cell; vertical-align:middle; }

1 2 3 4 5 6 7 8 9

.wrapper{

displaytable;

}

.parent{

displaytable-cell;

vertical-alignmiddle;

}  

CHILD

Задача вертикального центрирования

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

Большинство людей, используя свойство text-align:, обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign, который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

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

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

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

Настройка выравнивания абзаца

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

Отступ от левого поля

Если необходимо выровнять текст от левой стороны листа, то подойдет этот способ. Требуется следовать инструкции:

  1. Поставьте курсор на желаемый абзац или выделите часть текста.
  2. С помощью правой кнопки мыши вызовите контекстное меню.
  3. Выберите в списке «Абзац».
  4. В разделе «Отступ» выберите нужный вариант для параметра «Слева».
  5. Нажмите «ОК».

Окно настроек абзаца можно открыть через верхнюю панель управления. Для этого следует перейти во вкладку «Главная», а затем нажать на иконку в левом нижнем углу категории «Абзац».

Альтернативно воспользоваться этим способом можно на вкладке «Макет». В категории «Абзац» можно выставить отступы для левого и правого края. Однако контекстное меню позволяет это делать быстрее и удобнее.

Отступ от правого поля

Чтобы выровнять текст от правой стороны листа нужно установить границы для правого поля следующим образом:

  1. Выделите нужный фрагмент.
  2. Через вкладку «Главная» или с помощью контекстного меню откройте настройки «Абзаца».
  3. Установите размер отступа справа.
  4. Нажмите «ОК».

Одна строка

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


CSS

.parent{ height:200px; line-height:200px; } .child{ white-space:nowrap; overflow:hidden; }

1 2 3 4 5 6 7 8 9 10

.parent{

height200px;

line-height200px;

}

.child{

white-spacenowrap;

overflowhidden;

}  

CHILD

Так мы растягиваем строку на всю высоту контейнера, при этом свободное пространство равномерно распределяется сверху и снизу элемента. Следует также запретить перенос строки, так как этот прием работает сугубо с однострочными элементами. Отметим, что центрировалось именно текстовое содержимое блока, а фон растянулся на всю высоту строки. Чтобы этого не происходило, если необходимо сохранить фон, нужно превратить блок в строчный элемент, добавив ему свойство display:inline.

CHILD

При должной подготовке можно попробовать и многострочный текст выровнять таким же способом:

CSS

.parent{ height:200px; line-height:200px; } .child{ line-height:normal; // переопределяем высоту строки display:inline-block; vertical-align:middle; }

1 2 3 4 5 6 7 8 9 10 11

.parent{

height200px;

line-height200px;

}

.child{

line-heightnormal;//переопределяемвысотустроки

displayinline-block;

vertical-alignmiddle;

}  

CHILD CHILD

Вариант 3. Известна высота внутреннего блока

Применение в информатике

Специалисты, которые работают с такими системами как DOS и UNIX, знают, что такое вертикальная линия, поскольку часто с ней работают. Подобное объясняется тем, что именно это обозначение используется для Stdout. А что же представляет собой Stdout? Все просто – это процесс, который обозначает перенаправление стандартного потока вывода определенной программы в другой конвейер.

Чтобы было более понятно, рассмотрим такую сложную формулу: cat fruits.txt | grev –v ^bad | sort. Но сразу отметим, что она сложная только на первый взгляд. В действительности программист задал простой алгоритм. С его помощью можно вывести на экран список фруктов, который содержится в файле под названием fruits.txt.

Но при этом можно будет увидеть только те фрукты, в названии которых в первых 3-х символах нет «bad». Более того, выведенный список будет сразу отсортирован по алфавиту. Все просто, не так ли? Но какая же формула натолкнула программистов на мысль сравнить вертикаль с трубопроводом?

Та, что приведена выше. На примере этой формулы можно понять, почему же российским программистам пришло в голову сравнить данный символ с трубопроводом. Описанный метод передачи информации направляет поток данных по тому же принципу работы, что и обычный трубопровод. Именно поэтому программисты из Советского Союза посчитали, что термин «pipe», пришедший с Запада, можно заменить на другой — «трубопровод». Ведь по вертикали — это значит и вниз, и вниз.

Пример программы в информатике с использованием вертикальных линий


С этим читают