Align middle html не работает

CSS — разбираемся почему не работает vertical-align

Vertical-align — одно из самых сомнительных CSS свойств, которое, вроде-бы и работает, но по факту, из-за своих специфических требований — нет. Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало

Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:

По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:

• Применяется только к inline или inline-block элементам;
• Выравнивает лишь элемент, к которому применяется, а его содержимое не трогает;
• В таблицах наоборот. влияет на содержимое, а ячейку не трогает;

Это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен — не задан тип блока.

Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.

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

Источник

Все способы вертикального выравнивания в CSS

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

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

Сравним следующие подходы. Выравнивание с помощью:

• таблицы,
• отступов,
• line-height ,
• растягивания,
• отрицательного margin ,
• transform ,
• псевдоэлемента,
• flexbox .

В качестве иллюстрации рассмотрим следующий пример.

Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

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

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

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

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

Выравнивание с помощью таблицы

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

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

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

Выравнивание с помощью отступов

Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H_outer – H_inner) / 2.

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

Выравнивание с помощью line-height

Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

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

Выравнивание с помощью «растягивания»

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

Для этого нужно:

1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
3. установить значение auto для вертикальных отступов внутреннего блока.

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

Минус данного способа — должна быть известна высота внутреннего блока.

Выравнивание с помощью отрицательного margin-top

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

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top : -H_inner / 2.

Минус данного способа — должна быть известна высота внутреннего блока.

Выравнивание с помощью transform

Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.

Выравнивание с помощью псевдоэлемента

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

Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .

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

Выравнивание с помощью Flexbox

Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

Минус данного способа − Flexbox поддерживается только современными браузерами.

Какой способ выбрать?

Нужно исходить из постановки задачи:

• Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
• Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
• Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
• Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

Источник

Не работает vertical-align: middle

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Почему не работает vertical-align: middle?
http://jsfiddle.net/32wxt/2/ Как я понимаю, если поставить для div’а vertical-align:middle, то.

Не срабатывает vertical-align: middle
Подскажите, пожалуйста, почему текст внизу страницы класса footerText не выравнивается вертикально.

Почему не работает vertical-align?
Добрый день! Не получается отцентрировать по вертикали текст.Использую vertical-align Почему не.

Решение

Решение

Blok1, хорошо, но либо мне пить надо бросать — либо.

Тема: Не работает vertical-align: middle

Вопрос: как Вы хотите выровнять свойством vertical-align: middle список горизонтально по центру, если это свойство выравнивает элементы по высоте, а не по ширине? Где логика?

Хотите вровнять горизонтально для ul задайте ширину + свойство margin:0 auto

Звезда в шоке.

Мой мосх уже свистит. 🙂 Кому что тут надо выравнивать?

Vertical-align
middle Выравнивает середину элемента относительно базовой линии родительского элемента где.

Vertical-align
Есть два вопрос по данному свойству. Подскажите пожалуйста. Есть код:

.

Vertical-align по центру
Доброго времени суток! Есть такой код. Не очень разбираюсь в свойстве vertical-align, а мне нужно.

Vertical align и span
Не могу понять, почему не работает vertical-align для тега спан. Тот факт, что свойство выравнивает.

Источник

Не работает vetical-align: middle

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

3 ответа 3

Все у вас верно выровненно. Проблема в другом. Шрифты создают для себя условный «контейнер» в котором происходит отрисовка букв. Добавляется пространство как сверху, так и снизу. Это нужно для всяких точек над Ё, хвостиков Й и т.д.

У текущего вашего шрифта вверху есть дополнительные несколько пикселей в сравнении с низом + одна буква заглавная, остальные строчные + в нижней части у вас underline. В итоге создается иллюзия отсутствия выравнивания, т.к. область над шрифтом получается выше.

Вот что будете если сменить шрифт на helvetica, убрать underline и сделать все буквы заглавными.

Пример:

Как видите результат гораздо лучше и ближе к «идеальному» выравниванию.

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

Просто сделайте верхний padding на пару пикселей меньше, чем нижний. Получится иллюзия «идеального» выравнивания.

Вот так:

Не могу говорить об эффективности в плане кроссплатформенности и кроссбраузерности такого решения, т.к. выглядит оно явно костыльным. Рекомендую поработать с шрифтом до нужного вам эффекта.

Подробнее об отрисовке шрифтов, позиционировании, line-height и прочем в контексте вашего вопроса:

Источник

Why is vertical-align: middle not working on my span or div?

I’m trying to vertically center a span or div element within another div element. However when I put vertical-align: middle , nothing happens. I’ve tried changing the display properties of both elements, and nothing seems to work.

This is what I’m currently doing in my webpage:

Here is a jsfiddle of the implementation showing that it doesn’t work: http://jsfiddle.net/gZXWC/

16 Answers 16

This seems to be the best way — some time has passed since my original post and this is what should be done now: http://jsfiddle.net/m3ykdyds/200

use «justify-content: center;» to align elements horizontally

Note: This might not work in old IE’s

Try this, works for me very well:

Setting the line-height to the same height as it’s containing div will also work

In case you cannot rely on flexbox. Place .child into .parent ‘s center. Works when pixel sizes are unknown (in other words, always) and no problems with IE9+ too.

You should put vertical-align: middle on the inner element, not the outer element. Set the line-height property on the outer element to match the height of the outer element. Then set display: inline-block and line-height: normal on the inner element. By doing this, the text on the inner element will wrap with a normal line-height. Works in Chrome, Firefox, Safari, and IE 8+

I used this to align everything in the center of the wrapper div in case it helps anyone — I found it simplest:

Here you have an example of two ways of doing a vertical alignment. I use them and they work pretty well. One is using absolute positioning and the other using flexbox.

Using flexbox, you can align an element by itself inside another element with display: flex; using align-self . If you need to align it also horizontally, you can use align-items and justify-content in the container.

If you don’t want to use flexbox, you can use the position property. If you make the container relative and the content absolute, the content will be able to move freely inside the container. So if you use top: 0; and left: 0; in the content, it will be positioned at the top left corner of the container.

Then, to align it, you just need to change the top and left references to 50%. This will position the content at the container center from the top left corner of the content.

So you need to correct this translating the content half its size to the left and top.

HTML

CSS

We set the parent div to display as a table and the child div to display as a table-cell. We can then use vertical-align on the child div and set its value to middle. Anything inside this child div will be vertically centered.

This is a modern approach and it utilizes the CSS Flexbox functionality. You can now vertically align the content within your parent container by just adding these styles to the .main container

You can also use CSS Grids ( a two-dimensional grid-based layout system).

And you are good to go!

here is a great article of how to vetical align.. I like the float way.

And the corresponding style:

It’s simple. Just add display:table-cell in your main class.

Here is the latest simplest solution — no need to change anything, just add three lines of CSS rules to your container of the div where you wish to center at. I love Flex Box #LoveFlexBox

Bonus

the justify-content value can be set to the following few options:

flex-start , which will align the child div to where the flex flow starts in its parent container. In this case, it will stay on top.

center , which will align the child div to the center of its parent container. This is really neat, because you don’t need to add an additional div to wrap around all children to put the wrapper in a parent container to center the children. Because of that, this is the true vertical center (in the column flex-direction . similarly, if you change the flow-direction to row , it will become horizontally centered.

flex-end , which will align the child div to where the flex flow ends in its parent container. In this case, it will move to bottom.

space-between , which will spread all children from the beginning of the flow to the end of the flow. If the demo, I added another child div, to show they are spread out.

space-around , similar to space-between , but with half of the space in the beginning and end of the flow.

Источник