Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Inline block выравнивание по вертикали: Центрирование горизонтальное и вертикальное

Содержание

Как выровнять по вертикали элемент `inline-block` внутри элемента ‘ `?

Я не могу выровнять по вертикали элемент inline-block <span> внутри элемента <td> (который имеет свой стиль по умолчанию display: table-cell ).

Оба элемента имеют фиксированные размеры: <td> is 24px tall and so is the `.

Я бы ожидал, что оба элемента будут иметь одинаковый размер рендеринга, так как ни один из них не имеет поля или отступа. Однако, похоже, что <td> каким-то образом выше, чем ожидалось, и я не могу понять почему.

Пример в этом jsfiddle .

Знаете ли вы, почему это происходит и как это сделать ?

css

html

Поделиться

Источник


ereOn    

26 сентября 2012 в 10:34

2 ответа


  • Как выровнять текст по вертикали в div, находясь внутри другого div?

    Я пытаюсь выровнять текст по вертикали внутри div. Я создал Fiddle моей текущей проблемы. вы можете просмотреть мой код по этой ссылке http://jsfiddle.net/NSvGc / Здесь в моем текущем коде <div style=display: block; width: 500px; border: 1px dashed #C0C0C0; margin: 0 auto; padding: 5px;>…

  • Как выровнять текст по вертикали в встроенном блоке td?

    У меня есть таблица с одним рядом, полным tds. Я сделал их display: inline-block, чтобы они обернулись вместе со страницей. Кажется, я не могу выровнять текст внутри них по вертикали: середина. Как мне это сделать? Или дисплей: инлайн-блок не той дорогой идете? Спасибо. Редактировать вот этот код….



7

Добавить font-size:0 в класс td

td {
    height: 24px;
    vertical-align: middle;
    background-color: red;
    margin: 0;
    padding: 0; font-size:0
}

Обновленная демо-версия http://jsfiddle.net/NxmhC/1/

Поделиться


Sowmya    

26 сентября 2012 в 10:37



2

Выровнять пролет:

span.foo {
    display: inline-block;
    height: 24px;
    width: 16px;
    background-color: lime;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Поделиться


Mo’in Creemers    

26 сентября 2012 в 10:54


Похожие вопросы:

Как правильно выровнять это изображение по вертикали?

Это стандартный код, который я использую для выравнивания элементов по вертикали внутри родительского элемента: HTML <div id=header> <img src=http://cdn.flaticon.com/png/256/60510.png />…

Как выровнять изображение и текст по вертикали внутри элемента TD?

<td> <img src=http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16×16.gif/> My feed </td> Вот как это выглядит: (источник: garethjmsaunders.co.uk ) Мой канал Значок и текст…

как выровнять элементы по вертикали в теге td

Я хочу выровнять 3 элемента в моем теге <td> по вертикали в теге center/middle. это те элементы, которые я хочу выровнять: кнопка изображения (тег) изображение с верхней стрелкой jquery…

Как выровнять текст по вертикали в div, находясь внутри другого div?

Я пытаюсь выровнять текст по вертикали внутри div. Я создал Fiddle моей текущей проблемы. вы можете просмотреть мой код по этой ссылке http://jsfiddle.net/NSvGc / Здесь в моем текущем коде <div…

Как выровнять текст по вертикали в встроенном блоке td?

У меня есть таблица с одним рядом, полным tds. Я сделал их display: inline-block, чтобы они обернулись вместе со страницей. Кажется, я не могу выровнять текст внутри них по вертикали: середина. Как…

Как выровнять списки по вертикали?

Я пытаюсь выровнять по вертикали текст списков, но безуспешно. li{ height: 100px; display: inline-block; vertical-align: middle; border: 1px solid red; } jsfiddle

Как выровнять эти изображения по вертикали?

У меня есть этот сайт,и я не могу выровнять изображения по вертикали в списке. http:/ / www.ruweplus.ro/echipamente-hidromasaj Я попробовал это сделать, но он не выравнивает мое изображение по…

Flexbox выровнять элемент по вертикали 1/3

Теперь я узнал, как центрировать элемент по вертикали с помощью flexbox, но как я могу выровнять элемент по вертикали на 1/3? спасибо

Как выровнять содержимое td по вертикали?

Использование Jhipster v5.0.1 и Angular v6.0.0. Цель Я хочу выровнять текст по вертикали в моем tds. Попробуй Я попытался просто добавить align-middle в свою таблицу: <table class=table…

элемент inline-block внутри элемента line height

Когда мне нужно создать меню только с одной строкой (в основном одна плавала слева и одна справа) Я всегда использовал метод присвоения родительскому элементу высоты и высоты линии для вертикального…

CSS вертикальное выравнивание inline/inline-block элементов

Я пытаюсь выровнять несколько компонентов inline и inline-block по вертикали в div . Почему span в этом примере настаивает на том, чтобы его толкнули вниз? Я пробовал и vertical-align:middle; , и vertical-align:top; , но ничего не изменилось.

HTML :

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSS :

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

RESULT:

FIDDLE

html

css

vertical-alignment

Поделиться

Источник


Yarin    

12 марта 2012 в 16:00

4 ответа


  • Вертикальное Выравнивание Дочерних Элементов

    Я пытаюсь выровнять элементы по вертикали в navbar на моей домашней странице. Внутри div находится ul, в котором есть li с тегами, похожими на них. До сих пор вертикальное выравнивание действительно не работало. А вот и HAML: .navcontainer %div#middle %ul#nav %li = link_to ‘About’, ‘#’ %li#signup…

  • css inline-block не работает на одном уровне

    Я столкнулся с некоторыми проблемами с свойством inline-block Это прекрасно работает, но когда я заполняю один из моих <li> , это не ставит их все на один уровень. Я хотел, чтобы все они имели одинаковый размер (ширину и высоту)= и одинаковое вертикальное положение Ниже приведен мой css…



277

vertical-align применяется к выравниваемым элементам, а не к их родительскому элементу. Чтобы выровнять дочерние элементы div по вертикали, сделайте это вместо этого:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

См.: http://jsfiddle.net/dfmx123/TFPx8/1186/

NOTE : vertical-align относится к текущей текстовой строке, а не к полной высоте родительского div . Если вы хотите, чтобы родительский div был выше и все еще имел элементы по вертикали, установите свойство div ‘s line-height вместо его height . Для примера перейдите по ссылке jsfiddle выше.

Поделиться


Diego    

12 марта 2012 в 16:03



25

Дайте vertical-align:top; в a & span . Подобный этому:

a, span{
 vertical-align:top;
}

Проверьте это http://jsfiddle.net/TFPx8/10/

Поделиться


sandeep    

12 марта 2012 в 16:04



6

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

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}

Поделиться


HoldTheLine    

12 марта 2012 в 16:04



1

Для точной настройки положения элемента inline-block используйте верхнюю и левую части:

  position: relative;
  top: 5px;
  left: 5px;

Спасибо CSS-Хитрости !

Поделиться


kslstn    

24 января 2020 в 08:31


Похожие вопросы:

Div с дисплеем: inline-block; имеют странное верхнее поле

Я создал два div, оба с display: inline-block . Пока оба div содержат одинаковое количество текста, вертикальное выравнивание в порядке. Но если я добавлю больше текста в первый div, второй получит…

CSS: inline-block vs inline text

Я хочу, чтобы мой блок был установлен на line-height (точно так же, как я делаю это с текстом). Как я знаю, я должен использовать display: inline-block в этом случае, но это не работает для меня….

CSS: неожиданное вертикальное положение элементов «inline-block»

Пожалуйста, обратите внимание на следующий код HTML: <html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en> <head> <meta http-equiv=Content-Type…

Вертикальное Выравнивание Дочерних Элементов

Я пытаюсь выровнять элементы по вертикали в navbar на моей домашней странице. Внутри div находится ul, в котором есть li с тегами, похожими на них. До сих пор вертикальное выравнивание действительно…

css inline-block не работает на одном уровне

Я столкнулся с некоторыми проблемами с свойством inline-block Это прекрасно работает, но когда я заполняю один из моих <li> , это не ставит их все на один уровень. Я хотел, чтобы все они имели…

Выравнивание элементов HTML/CSS float или display: inline-block

Может ли кто-нибудь помочь мне с этой проблемой? Вы не можете изменить структуру HTML, но вы должны настроить CSS, чтобы это было в той же строке, если это возможно… Заранее спасибо! Вот в чем…

css вертикальное выравнивание вертикальное выравнивание внутри

Моя цель состоит в том, чтобы создать 3 вертикально выровненных div, где один div имеет вертикальную полосу высоты родителя ( border-right ). родитель может иметь фиксированную высоту, что, в свою…

Div inline-block вертикальное выравнивание?

При запуске https://jsfiddle.net/8vy5aefr/2/ при width около 220 пикселей есть ли способ, чтобы синий квадрат сидел прямо под красным квадратом (кроме margin-top:-100px;)? Обратите внимание, что…

Среднее вертикальное выравнивание inline-block div

У меня есть 2 inline-block дивов рядом друг с другом. Левый имеет переменную высоту, а правый просто имеет кнопку внутри. Я хочу правый див всегда быть вертикально по центру с левой ноги. Вот как…

CSS «inline-block» значение не работает с изображениями

Со значением inline-block в CSS3 я пытаюсь выровнять изображения по центру, но это не выравнивание! Я также пытался использовать значение block, но оно по-прежнему не работает. Это мой PC? Это…

inline block выравнивание по вертикали

Автор admin На чтение 4 мин.

C блочно-строчными элементами вы уже знакомились в курсе про блочную модель документа. Напомним, что это элементы, у которых свойство display имеет значение inline-block .

Блочно-строчные элементы ведут себя двояко. Снаружи они выглядят как обычные строчные, но внутри они ведут себя как блочные.

От строчных им достались следующие черты:

  • по ширине они ужимаются под своё содержимое;
  • могут располагаться в одну строку;
  • реагируют на вертикальное выравнивание, vertical-align ;
  • реагируют на горизонтальное выравнивание, text-align , заданное у родителя.
  • им можно задавать размеры с помощью width и height ;
  • а также внешние и внутренние отступы и рамки, которые работают во всех направлениях и увеличивают размер элемента.

vertical-align: middle не помог.

  • Вопрос задан более трёх лет назад
  • 4534 просмотра

DTX: Менять rem не нужно. Вроде как только с процентами не пройдет центрирование.
У вас сейчас все правильно.
B суть здесь вообще не в Inline-block. Выравнивайте либо через line-height = height, либо с помощью flexbox;
А flexbox как раз для таких вот мелочей и будет самым лучшим вариантом.

Ну а если хочется по извращаться то, можно еще использовать не inline-block а просто inline.
B и плюс добавить еще:
.b::after content: «»;
width: 1px;
background: transparent;
display: inline-block;
height: 100%;
vertical-align: middle;
>

Малоизвестный глюк работы с inline блоками и vertical-align

evg_: >У вас сейчас все правильно.
Вот только центральный блок находится ниже середины внешнего блока.

>Малоизвестный глюк работы с inline блоками и vertical-align
Это не глюк, всё по спецификации. Вот тут объясняют:
css-live.ru/articles/ikf-vertikalnoe-vyravnivanie-.

Но неужели нет просто способа центрировать inline-block по центру. Не верю.

Обратить внимание на стили для ссылки.
Если шрифт не нулевой то может блок чуть съезжать вверх-вниз. Ссылка изначально имеет вывод в inline формате, поэтому некорректно отрабатывает высоту. Надо ставить inline-block

Как вариант запомню, спс.

>Если шрифт не нулевой то может блок чуть съезжать вверх-вниз.
Почему так происходит?

.a — это просто класс, не ссылка
.

DTX: Привиделось что в коде ссылка, раз нет, тогда про инлайн блок можно не учитывать)

По шрифту. Я не разбирался в этом досконально с документацией. Но как мне видится. Line-height и размер шрифта работает по принципу (дальше грубый пример): из высоты линии вычитаем высоту шрифта и получаем расстояние между строк. Далее добавляем его до или после строки. Из за этого расстояния добавочного/вычтенного как раз блок и съезжает.

evg_: Отнюдь, это свойство играет роль. Изначально выравнивание ставится по базовой линии. А не по центру. Поэтому блок по центру ну ни как не будет.

У него был пример я бы не сказал что рабочий, так как он имел сдвиг по вертикали.
А способ решения задачи уже можно оставить на усмотрение ТС 🙂
Можно еще и абсолютно позиционировать блоки по центру, можно и флексами — у каждого способа есть свои области применения. Как допустим у флексов с кроссбраузерностью. Ведь мягко говоря — ни очень хорошо. А иногда может потребоваться и поддержка старых браузеров.

Да вы и сами в курсе.

Алексей: Да уже вспомнил что дефолтное выравнивание по базовой линии. Но все равно это извращение какое то с этими inline-block, vertical align. Ну никак ни для это они созданы.
Для этих вещей есть намного лучшее решение — использовать флексы.
На счет кроссбраузерности. Во всех браузерах превосходная поддержка (Если конечно IE не считать за браузер). caniuse.com/#feat=flexbox Но и для этого убожества можно использовать условные комменты.
В общем самым адекватным решением будет использование flexbox. остальное порнография. имхо

На счет абсолютного позиционирования))) можно и на таблицах сверстать.) Тут то и пригодится vertical-align.

Проблема заключается в том что, не понятно как работает свойство vertical-align.

Как можно увидеть блоки идут в ряд как и требуется от display:inline-block; Но нужно же как-то задать выравнивание этих блоков: выровнять по верху, по низу, по середине. И тут нам должно помочь свойство vertical-align, т.к свойство display:inline-block; дает нам природу inline объектов. Но не тут то и было проблема заключается в том что если блок и является inline-block то если внутри будет какой-то текст то выравнивание будет равняться по этому тексту, а не по блоку.

Объясните мне как работает vertical-align при inline-block.

Как игнорировать содержимое (текст) внутри inline-block элемента?

Выравнивание текста по вертикали · GitHub

Выравнивание текста по вертикали · GitHub

Instantly share code, notes, and snippets.

<div>
<div>
<img src=»/img/logo.svg» alt=»»>
</div>
<div>maps.me</div>
</div>
.logo
display inline-block
position relative
padding-left 40px
font-size 0
text-align left
&:before
content »
display inline-block
width 0
height 32px
vertical-align middle
margin-left -1px
&__img
position absolute
top 0
left 0
width 32px
height 32px
line-height 0
> img
width 100%
height 100%
&__text
display inline-block
vertical-align middle
font-size font_size_small
text-transform uppercase
color color_text_white
font-weight 600

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Вертикальное выравнивание inline-block элементов

Элементы inline-block с вертикальным выравниванием по умолчанию (baseline)

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

Элементы inline-block с вертикальным выравниванием по нижней границе

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

Inline-block, выровненные по верхней границе

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

Вертикально центрированные inline-block

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

Как выровнять элементы inline-block по верхней границе контейнера

Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.

1. Создайте HTML¶

  • Создайте <div> с классом «container».
  • Создайте два других span внутри «container». Первый div имеет название «small-box», а второй называется «big-box».
<div>
  <span></span>
  <span></span>
</div>

2. Создайте CSS¶

  • Задайте height и width для классов.
  • Добавьте color, width и style к border.
  • Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.
.container { 
border: 1px solid #666666;
width: 350px;
height: 150px;    
}

.small-box{
display: inline-block;
width: 40%;
height: 30%;
border: 1px solid #666666;
background: #1c87c9;    
}

.big-box {
display: inline-block;
border: 1px solid #666666;
width: 40%;
height: 50%;
background: #8ebf42;    
}

Окончательный результат:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;    
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Попробуйте сами!

Нашей проблемой является выравнивание .small-box по верхней границе контейнера.

Ключевое слово «top» свойства vertical-align поможет нам в этом вопросе.

Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение «top» выравнивает верхний край элемента с верхней линией блока.

Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:

.small-box{ 
vertical-align: top;
}

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;  
      vertical-align:top;  
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов <li>.

Пример, где произошла ошибка:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      }
      ul li{
      display:inline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>Blue</span>
      </li>
      <li>
        <span>Green</span>
      </li>
      <li>
        <span>Grey</span>
      </li>
      <li>
        <span>
        Как выровнять верхние границы всех цветных div.
        </span>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами!

Нам просто необходимо заменить свойство display на свойство float со значением «left». Мы используем свойство float, которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в «both». Это означает, что плавающие элементы запрещены с правой и левой стороны.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      clear:both;
      content:"";
      display: table;
      }
      ul li{
      float:left;
      list-style-type:none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>Blue</span>
      </li>
      <li>
        <span>Green</span>
      </li>
      <li>
        <span>Grey</span>
      </li>
      <li>
        <span>
          Как выровнять верхние границы всех цветных div.
        </span>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами!

В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово «flex» свойства display, которое используется с расширением -Webkit-.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      color:#ffffff;
      display:flex;
      display: -webkit-flex;
      align-items:flex-start;
      -webkit-align-items:flex-start;
      }
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      padding:10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Blue</span>
      <strong>Green</strong>
      <span>Grey</span>
      <span>
      Как выровнять верхние границы всех цветных div.
      </span>
    </div>
  </body>
</html>

Попробуйте сами!

Как вертикально центрировать встроенные (встроенные-блочные) элементы

Существует множество различных методов, которые вы можете использовать для выравнивания встроенных (встроенных-блочных) элементов по вертикали. В этом фрагменте мы продемонстрируем некоторые широко используемые решения такого рода проблем с выравниванием.

Решение со свойством заполнения CSS¶

Иногда встроенные элементы (inline-block) могут отображаться вертикально по центру из-за равного заполнения над и под ними.

Пример вертикального центрирования встроенных элементов с помощью свойства padding:

  

  
     Название документа 
    <стиль>
      тело {
        фон: # c2c2c2;
        размер шрифта: 90%;
      }
      главный {
        фон: #fff;
        маржа: 20px 0;
        отступ: 50 пикселей;
      }
      main a {
        фон: # 83d483;
        цвет: #fff;
        отступ: 40 пикселей 30 пикселей;
        текстовое оформление: нет;
      }
    
  
  
    <основной>
       1 
       2 
       3 
     
  

Попробуйте сами »

Результат

Решение с использованием свойств CSS line-height и height¶

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

Пример вертикального центрирования встроенного элемента со свойствами line-height и height:

  

  
     Название документа 
    <стиль>
      тело {
        фон: # c2c2c2;
        размер шрифта: 90%;
      }
      главный {
        фон: #fff;
        маржа: 20px 0;
        отступ: 40 пикселей;
      }
      main span {
        дисплей: встроенный блок;
        фон: # 83d483;
        цвет: #fff;
        высота: 100 пикселей;
        высота строки: 100 пикселей;
        отступ: 20 пикселей;
        ширина: 50%;
        белое пространство: nowrap;
      }
    
  
  
    <основной>
       Пример вертикально центрированной линии.
    
  
  

Попробуйте сами »

Решение со свойством CSS vertical-align¶

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

Здесь мы выравниваем элементы и внутри

. В нашем примере вертикальное выравнивание выполняется относительно текущей текстовой строки, а не полной высоты родительского элемента. Но если вы хотите, чтобы родительский элемент был выше, а его элементы были центрированы по вертикали, вы можете установить свойство line-height на

вместо высоты.

Пример вертикального центрирования элементов inline и inline-block с помощью свойства vertical-align:

  

  
     Название документа 
    <стиль>
      div {
        фон: #dbdbdb;
        маржа: 10 пикселей;
        высота строки: 100 пикселей;
      }
      div> * {
        вертикальное выравнивание: по центру;
        высота строки: нормальный;
      }
      a {
        цвет фона: # 83d483;
        высота: 20 пикселей;
        дисплей: встроенный блок;
        граница: сплошная 1px # 666;
        отступ: 5 пикселей;
      }
      охватывать {
        фон: # 6fa2bf;
      }
    
  
  
    
Ссылка Немного текста

Попробуйте сами »

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

и в макете таблицы, созданном с помощью CSS.Здесь мы устанавливаем отображение на «table-cell» для нашего элемента

и свойство vertical-align на «middle». Но мы не используем свойство vertical-align в элементе

, так как по умолчанию оно размещается посередине.

Пример вертикального центрирования содержимого внутри элементов

и

:
  

  
     Название документа 
    <стиль>
      тело {
        фон: # c2c2c2;
        размер шрифта: 90%;
      }
      стол {
        фон: #fff;
        ширина: 200 пикселей;
        граница-коллапс: раздельный;
        маржа: 15 пикселей;
        высота: 200 пикселей;
      }
      table td {
        фон: # 83d483;
        цвет: #fff;
        отступ: 15 пикселей;
        граница: 5px solid #fff;
        
      }
      .center-table {
        дисплей: таблица;
        высота: 200 пикселей;
        фон: #fff;
        ширина: 200 пикселей;
        маржа: 20 пикселей;
      }
      .center-table p {
        дисплей: таблица-ячейка;
        маржа: 0;
        фон: # 83d483;
        цвет: #fff;
        отступ: 20 пикселей;
        граница: 5px solid #fff;
        вертикальное выравнивание: по центру;
      }
    
  
  
    <таблица>
      
         Пример вертикально центрированных нескольких строк текста в ячейке таблицы.
      
    
    

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

Попробуйте сами »

Решение с CSS Flexbox¶

Вертикальное выравнивание встроенных элементов также возможно с помощью Flexbox. Вы можете легко использовать один гибкий дочерний элемент, чтобы центрировать его в гибком родительском элементе.

Пример вертикального центрирования встроенных элементов с помощью Flexbox:

  

  
     Название документа 
    <стиль>
      тело {
        фон: # c2c2c2;
        размер шрифта: 90%;
      }
      div {
        фон: #fff;
        ширина: 200 пикселей;
        маржа: 20 пикселей;
      }
      .flex-center {
        фон: # 83d483;
        цвет: #fff;
        граница: 5px solid #fff;
        дисплей: гибкий;
        flex-direction: столбец;
        justify-content: center;
        высота: 200 пикселей;
        изменить размер: по вертикали;
        перелив: авто;
      }
      .flex-center span {
        маржа: 0;
        отступ: 15 пикселей;
      }
    
  
  
    
Пример вертикально центрированных нескольких строк в контейнере flexbox.

Попробуйте сами »

Это актуально только в том случае, если родительский контейнер имеет фиксированную высоту.

Решение с методом «призрачного элемента »¶

Этот метод предполагает, что псевдоэлементу (в нашем примере это: before) задана полная высота. Он помещается в контейнер, и текст выравнивается по нему. В следующем примере у нас есть элемент

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

Пример вертикального центрирования встроенных элементов с «призрачным элементом»:

  

  
     Название документа 
    <стиль>
      тело {
        фон: # c2c2c2;
        размер шрифта: 90%;
      }
      div {
        фон: #fff;
        ширина: 240 пикселей;
        высота: 200 пикселей;
        маржа: 15 пикселей;
        цвет: #fff;
        изменить размер: по вертикали;
        перелив: авто;
        отступ: 20 пикселей;
      }
      .ghost-center {
        положение: относительное;
      }
      .ghost-center :: before {
        содержание: " ";
        дисплей: встроенный блок;
        высота: 100%;
        ширина: 1%;
        вертикальное выравнивание: по центру;
      }
      .ghost-center p {
        дисплей: встроенный блок;
        вертикальное выравнивание: по центру;
        ширина: 190 пикселей;
        маржа: 0;
        отступ: 10 пикселей;
        фон: # 83d483;
      }
    
  
  
    

Пример вертикально центрированных нескольких строк в контейнере.

Попробуйте сами »

Почему DIV с отображением inline-block выпадает не на своем месте! — HTML и CSS — Форумы SitePoint

Новости мира:

Почему DIV с синим фоном выпадает из вертикального выравнивания с другими DIV в той же строке с:
display: inline-block;

@WorldNews,

Выравнивание по умолчанию встроенных и встроенных блочных элементов — baseline .

Каждый раз, когда кто-то использует «inline» или «inline-block», он должен учитывать вертикальное выравнивание элементов. Лично, когда я назначаю элемент «inline-block», я обычно включаю «vertical-align:…»

Пожалуйста, прочтите (кратко).
Веб-документы MDN

с выравниванием по вертикали

Свойство CSS vertical-align устанавливает вертикальное выравнивание встроенного поля или поля ячейки таблицы.

Вы можете поиграть (получить опыт) здесь:
https: //www.w3schools.com / cssref / pr_pos_vertical-align.asp

Метод гибкости

@ coothead — это потрясающе.

Чтобы быть неприятным, я включаю решение CSS display: table / table-cell, потому что код похож на ваш только в упрощенном виде, я изменил идентификаторы на классы. Пожалуйста, прочтите комментарии.

  


     
     
     
     template  

    <стиль>
html {box-sizing: border-box;}
*, *: до, *: после {box-sizing: inherit;}
тело {
    заполнение: 0 1%;
    маржа: 0;
}
.Continer {
    дисплей: таблица;
    ширина: 100%;
    граница: сплошной серый цвет 3px;
    маржа сверху: 25 пикселей;
}
.holder {
    дисплей: таблица-ячейка;
    вертикальное выравнивание: по центру;
    ширина: 25%; / * может варьироваться в зависимости от содержимого * /
    высота: 100 пикселей; / * рассматривается как минимальная высота * /
    выравнивание текста: центр;
    граница: сплошной фиолетовый 1px;
    цвет белый;
}
.red {background-color: # FF0000;}
.blue {цвет фона: # 0000FF;}
.yellow {background-color: # E2BE22;}
.green {background-color: # 008800;}
.tesy {
    граница: сплошной красный 1px;
    ширина: 300 пикселей;
    маржа: 0 авто;
}
    



Привет, мир

До сих пор мы создавали веб-страницы с использованием HTML и стилизовали их с помощью CSS.Наши страницы выглядят великолепно, но они не интерактивны - мы не можем перетаскивать элементы по странице, открывать и закрывать скользящие панели, анимировать HTML-элементы или добавлять новые элементы на наши HTML-страницы, просто нажимая кнопку.

Inline-block для вертикально выровненных сеток

Если вы пытались выровнять элементы по вертикали с помощью CSS, вы знаете, что это может быть сложно, но возможно.Кажется, что это усложняется, когда вы пытаетесь создать сетку адаптивного веб-дизайна (RWD), которая вертикально выравнивает элементы в каждой строке … и строки могут переноситься и разделяться на несколько строк. Кто бы мог подумать, что ответ был простой функцией CSS2? Не уверены, что он подходит для вашего сайта? Проверьте это на официальном веб-сайте Halo Waypoint.

Если вы сталкивались с проблемами в прошлом, вероятно, это потому, что ваша сетка была разработана с использованием CSS float вместо inline-block.

Попробуйте изменить размер браузера, точки останова установлены на 300, 500 и 700 пикселей, что перемещает поля в несколько строк.

Как это работает

Встроенный блок позволяет элементам перемещаться как встроенные элементы, но с учетом свойств, таких как ширина, как элементы блока. Это базовый материал, но все становится интересно, когда с вертикальным выравниванием устанавливается на средний . Внезапно элементы в одном горизонтальном ряду выстраиваются вертикально друг относительно друга. Попробуйте поднять его на ступеньку выше и изменить некоторые элементы на vertical-align: bottom и vertical-align: top … сумасшедшие вещи, элементы на самом деле делают то, что вы им говорите!

 .row div {
  / * Магия вертикального выравнивания * /
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  ширина: 25%; / * Ширина контролирует количество элементов в строке * /
}  

встроенный блок позволяет элементам перемещаться и выравниваться по вертикали, как встроенные элементы.

Единственная часть, которая кажется хакерской, — это то, что вы должны удалить все пробелы между элементами в строке. Тем не менее, это имеет смысл, поскольку элементы установлены как inline-block , пробел вызовет пробел между элементами.Это то же поведение, что и ссылка в абзаце текста; пробел вокруг ссылки отображается как пробел, как если бы он был между двумя словами. Есть несколько различных подходов к удалению этих пробелов.

  
<- ->
<- ->
<- ->

Комментарии в формате HTML — это один из способов удаления встроенных пробелов при сохранении HTML-кода элементов на отдельных строках.

Поддержка реверсирования потока

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

  .row {
  направление: RTL;
}
.row div {
  направление: lrt;
}  

Направление может быть изменено для ряда и обратно для ящиков.

Это приводит к тому, что элементы перемещаются справа налево, а не слева направо.

Попробуйте изменить размер браузера, точки останова установлены на 300, 500 и 700 пикселей, что перемещает поля в несколько строк.

Даже поддерживает IE 6

IE6 недоступен для многих из наших радаров, однако некоторые сайты все еще нуждаются в его поддержке, а некоторые должны поддерживать IE7.

  div {
  * дисплей: встроенный;
  * масштабирование: 1;
  * ширина: 16,6%;
}  

Простое трехстрочное исправление добавляет поддержку IE 6 и IE 7.

Дополнительная литература

[Решено] Css Как вертикально выровнять встроенные элементы

Вот методика выравнивания строчных элементов внутри родительского элемента одновременно по горизонтали и вертикали:

1) В этом подходе мы создаем встроенный блок (псевдо) элемент в качестве первого (или последнего) дочернего элемента родительского элемента и устанавливаем его свойство height на 100% , чтобы принять вся высота родительского .

2) Кроме того, добавление vertical-align: middle сохраняет встроенные элементы (-block) в середине межстрочного пространства. Итак, мы добавляем это объявление CSS к первому дочернему элементу и к нашему элементу (изображение ).

3) Наконец, чтобы удалить символ пробела между встроенными (-block) элементами , мы могли бы установить размер шрифта родительского элемента равным нулю на font-size: 0; .

Примечание: Я использовал технику замены изображения Николаса Галлахера в следующем.

Какие преимущества?

  • Контейнер (родительский ) может иметь динамические размеры.
  • Нет необходимости явно указывать размеры элемента изображения.

  • Мы можем легко использовать этот подход для выравнивания элемента

    по вертикали; которые могут иметь динамическое содержимое (высоту и / или ширину).Но обратите внимание, что вам нужно повторно установить свойство font-size для div для отображения внутреннего текста. Онлайн-демонстрация .

  
...
  .container {
    высота: 300 пикселей;
    выравнивание текста: центр; / * выравниваем строчные (-block) элементы по горизонтали * /
    шрифт: 0/0 а; / * убираем пробел между встроенными (-block) элементами * /
}

.container: before {/ * создать полноразмерный встроенный блок pseudo = element * /
    содержание: ' ';
    дисплей: встроенный блок;
    вертикальное выравнивание: по центру; / * вертикальное выравнивание встроенного элемента * /
    высота: 100%;
}

#element {
    дисплей: встроенный блок;
    вертикальное выравнивание: по центру; / * вертикальное выравнивание встроенного элемента * /
    шрифт: 16px / 1 Arial sans-serif; / * <- сбросить свойство шрифта * /
}
  

Выход

В этом разделе не будет ответа на вопрос, поскольку OP уже знает, как создать реагирующий контейнер.Однако я объясню, как это работает.

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

Процентное значение верхнего / нижнего заполнения или полей относительно ширины содержащего блока.

Например:

  .responsive-container {
  ширина: 60%;

  утеплитель: 60%; / * 1: 1 Высота такая же, как ширина * /
  обивка-верх: 100%; / * ширина: высота = 60: 100 или 3: 5 * /
  утеплитель: 45%; / * = 60% * 3/4, ширина: высота = 4: 3 * /
  обивка: 33.75%; / * = 60% * 9/16, ширина: высота = 16: 9 * /
}
  

Вот онлайн-демонстрация . Закомментируйте линии снизу и измените размер панели, чтобы увидеть эффект.

Кроме того, мы могли бы применить свойство padding к фиктивному дочернему элементу или псевдоэлементу : before /: after для достижения того же результата. Но обратите внимание на , что в этом случае процентное значение для заполнения относится к ширине для .Сам ответный контейнер .

  
  .responsive-container {ширина: 60%; }

.responsive-container .dummy {
  обивка-верх: 100%; / * 1: 1 квадрат * /
  утеплитель: 75%; / * w: h = 4: 3 * /
  обивка-верх: 56,25%; / * ш: в = 16: 9 * /
}
  

Демо № 1 .
Демо № 2 (Использование : после псевдоэлемента )

Добавление содержимого

Использование свойства padding-top приводит к появлению огромного пространства вверху или внизу содержимого внутри контейнера .

Чтобы исправить это, мы обернули контент элементом оболочки, удалили этот элемент из нормального потока документа, используя абсолютное позиционирование, и, наконец, развернули оболочку (bu, используя верхний , правый , нижний и left properties), чтобы заполнить все пространство своего родителя, контейнера .

Поехали:

  .responsive-container {
  ширина: 60%;
  положение: относительное;
}

.responsive-container .wrapper {
  позиция: абсолютная;
  верх: 0; справа: 0; внизу: 0; слева: 0;
}
  

Вот онлайн-демонстрация .


  
  .img-container {
  выравнивание текста: центр; / * Выравнивание встроенных элементов по центру * /
  шрифт: 0/0 а; / * Скрыть символы вроде пробелов * /
}

.img-container: before {
  содержание: ' ';
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  высота: 100%;
}

.img-container img {
  вертикальное выравнивание: по центру;
  дисплей: встроенный блок;
}
  

Вот РАБОЧАЯ ДЕМО .

Очевидно, вы могли бы избежать использования псевдоэлемента :: before для совместимости с браузером и создать элемент как первый дочерний элемент .img-контейнера :

  
  .img-container .centerer {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  высота: 100%;
}
  

ОБНОВЛЕННАЯ ДЕМО .

Использование свойств

max- *

Чтобы сохранить изображение внутри поля меньшей ширины, вы можете установить свойство max-height и max-width на изображении:

  .img-container img {
    вертикальное выравнивание: по центру;
    дисплей: встроенный блок;
    максимальная высота: 100%; / * <- Установить максимальную высоту на 100% от его родителя * /
    максимальная ширина: 100%; / * <- Установить максимальную ширину равной 100% от родительской * /
}
  

Вот и ОБНОВЛЕННАЯ ДЕМО .

CSS - выравнивание встроенных блоков и базовых линий

от

Когда мы используем display: inline-block для размещения элементов рядом друг с другом, по умолчанию их базовая линия выравнивается по родительской базовой линии, если для свойства vertical-align этого элемента не установлено значение, отличное от baseline .

Вот несколько примеров того, как работает выравнивание базовой линии.

базовый пример базового выравнивания встроенного блока

Базовая линия элемента div - это базовая линия его последнего строчного блока в нормальном потоке.Здесь оба div выровнены по последней текстовой строке.

 

привет
Некоторый текст, который будет переноситься

выравнивание базовой линии встроенного блока - пустой div

Если div пуст, его базовой линией является край нижнего поля.Здесь последняя текстовая строка первого div выровнена по нижнему краю поля второго div (так как он пуст).

 

привет

выравнивание базовой линии встроенного блока - div с переполнением

В случае, если у div есть переполнение, отличное от видимого (например,грамм. scroll, hidden), его базовой линией является нижний край поля. Здесь последняя текстовая строка первого div выровнена с нижним краем поля второго div (так как у него переполнение : прокрутка ).

 

привет
привет

Остерегайтесь «встроенного блока» (пример)

Для интерфейсного веб-разработчика важно знать, как использовать встроенный блок.Не только потому, что это важное значение свойства CSS, это еще и один из тех швейцарских армейских ножей, которые можно достать из своего волшебного ящичка. Но вопрос в том, знаете ли вы, как избежать ловушек «inline-block»?

Кроссбраузерная поддержка

К сожалению, inline-block НЕ поддерживается в IE7 и ниже, а также в FF 2 и ниже. Исправить и то и другое довольно просто.

Для IE просто добавьте

  увеличение: 1;
* дисплей: встроенный;  

Что это значит? display: inline сообщает IE визуализировать элемент как встроенный элемент.Но тогда вы спросите, не нарушит ли это макет, поля и все эти свойства, связанные с блочными элементами?

Давайте посмотрим на зум : 1 . Ранние браузеры IE имели интересное свойство под названием hasLayout. Элементы с этим включенным свойством означают, что сам элемент превратится в блок и попытается отрендерить себя. И hasLayout недоступен как свойство, но вместо этого доступен масштабирование. Для получения дополнительной информации см. Http://haslayout.net/haslayout

.

Следующая строка касается того, чтобы IE правильно распознал свойство отображения.Здесь я добавляю * перед свойством, чтобы указать, что это взлом только для IE7 и ниже.

Что касается Firefox, просто добавляем

  дисплей: -moz-inline-stack;  

подойдет. Встроенный стек был экспериментальной функцией, которая была разработана в Mozilla без официального добавления в Firefox. Но в целом он делает то же самое, что и inline-block, только версия для разработчиков.

Диваны разной высоты

'inline-block' следует свойству vertical-align при установке вертикального распределения.Вы могли столкнуться с этой проблемой здесь

См. Пример JSBin http://jsbin.com/wafub/2/edit

Где блоки выровнены по низу. Или, если у div есть переполнение содержимого, например,

См. Пример JSBin http://jsbin.com/wafub/4/edit

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

Пустое горизонтальное пространство между div

Как вы могли заметить в предыдущем примере, между разными div есть некоторый интервал; хотя я этого не добавлял. Взгляните на этот пример http://jsbin.com/vatoh/2/edit

Вы увидите, что даже без полей и отступов на строчном блоке div s между ними все еще есть странный интервал. Вот почему:

Разрыв строки определяется как возврат каретки (), перевод строки (
) или пару возврата каретки / перевода строки.Все разрывы строк представляют собой пробелы.

Из http://www.w3.org/TR/html401/struct/text.html#line-breaks

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

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

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

Вот исправление, сделав родительский контейнер с размером шрифта : 0; и сбросив размер шрифта в самом элементе вот так.

Вопрос Вертикальное выравнивание DIV с использованием относительного позиционирования и встроенного блока?

Вопрос
Вертикальное выравнивание DIV с использованием относительного позиционирования и встроенного блока?

*

1548 видимость

0 arrow_circle_up

0
arrow_circle_down


У меня проблема с выравниванием DIV по вертикали, когда содержимое внутри них имеет разную высоту (хотя сами DIV имеют фиксированный размер).

См. Пример HTML здесь (со встроенным CSS)

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


Ответ - 1

проверено

0 arrow_circle_up

0
arrow_circle_down

Добавьте свойство vertical-align - неважно какое, они все делают одно и то же, поскольку они одного размера.Если они разных размеров, используйте vertical-align: middle :

.

  .collection_box {
    вертикальное выравнивание: по центру; / * или сверху, или снизу, если они одного размера * /
}
  

Ответ - 2

0 arrow_circle_up

0
arrow_circle_down

Переместите их влево:

 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *