Почему не работает vertical align: html — Не работает vertical-align: middle;

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

Задать вопрос

Вопрос задан 7 лет 7 месяцев назад

Изменён 7 лет 6 месяцев назад

Просмотрен 8k раза

Вот смотрите, простой казалось бы код, но почему не работает vertical-align: middle;?

.mainHistory{
  width: 1100px;
  margin: 100px 0 0 0;
  position: relative;
  display: block;
}
.cellHistory{
     float: left; 
  width: 33%;
  text-align: center;
}
.cellHistory span{
        display: inline-block;
  vertical-align: middle;
}
  <div>
  <div>
    <span>01 01 2000</span> 
  </div>
  <div>
    <span>Создание фирмы
    Первоначальное название: ооо фирма </span>
  </div>  
  <div>
    <img src="/1.  png">
  </div>
  </div>

• html
• css

Необходимо так

.mainHistory {
    width: 1100px;
    margin: 100px 0 0 0;
    position: relative;
    display: block;
    font-size: 0; <! -- убираем отступы  display: inline-block -->       
}
.cellHistory {
    display: inline-block;
    vertical-align: middle;
    width: 33.33333333333333%;
    text-align: center;
    font-size: 14px;
}
.cellHistory span {}

<div>
  <div>
    <span>01 01 2000</span> 
  </div>
  <div>
    <span>Создание фирмы Первоначальное название: ооо фирма</span>
  </div>
  <div>
    <img src="http://placehold.it/150x250" alt="" />
  </div>

Fiddle

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Разбираемся с CSS свойством vertical-align

«Vertical-align не работает!», — закричит web-разработчик.

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

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

 

Что оно не делает?

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

Это напоминает мне то, как мы это делали в дни, когда повсеместно использовалась табличная верстка:

<td valign="top">
    Whatever...
</td>

В данном табличном случае свойство valign (устаревшее) поднимет все содержимое в td-элементе наверх.

 

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

Но vertical-align так не работает!

 

Как на самом деле работает vertical-align?

Свойство vertical-align подчиняется трем правилам:

1. Применяется только к inline или inline-block элементам
2. Оно влияет на выравнивание самого элемента, а не его содержимого (исключение, когда свойство применяется к ячейкам таблицы)
3. Когда применяется к ячейкам таблицы, значение влияет на содержимое, а не на саму ячейку.

Другими словами, следующий код не будет иметь никакого эффекта:

div {
	vertical-align: middle; /* ничего не делает */
}

Почему? Потому что <div> блочный элемент (block, а не inline). Конечно, вы можете конвертировать <div> в inline или inline-block элемент, тогда vertical-align будет иметь эффект.

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

Как высоко вверх или вниз элемент будет выравнен зависит от размеров встроенных элементов на той же линии.

 

Немного визуализации

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

Как видно, 3 левых элемента наседают на нашу воображаемую линию, а правый элемент со свойством vertical-align: top прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.

 

Оригинал статьи

Автор статьи: Alex. Категория: CSS
Дата публикации: 26.03.2013

графика — проблема с выравниванием по вертикали текста и изображений в длинных таблицах при использовании tex4ht — TeX

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

lualatex .

Но то же решение не работает, когда я компилирую в HTML с помощью make4ht. Итак, этот вопрос заключается в том, что нужно сделать, чтобы результат отображался в HTML так же, как и в PDF. Вот МВЕ. Проблема в том, что valign=t from Adjustbox не действует в tex4ht, как в pdf.

 \documentclass[12pt]{статья}
\usepackage{mwe}%loads graphicx
\usepackage[экспорт]{adjustbox}
\usepackage{длинный стол}
\начать{документ}
\begin{longtable}[c]{|p{1in}|p{3in}|p{1in}|}\hline
Тест A&\vspace{0pt}\includegraphics[width=3in,valign=t]{example-image-a}&TestB\\\hline
\end{длинный стол}
\конец{документ}
 

Скомпилировано с использованием lualatex foo4.

tex дает ожидаемый результат

Компиляция того же файла с make4ht foo4.tex дает это

Я хочу, чтобы текст был вверху, как это показано в PDF.

Поскольку очевидно, что valign=t не работает в tex4ht, какие еще есть варианты сделать то же самое в tex4ht? Как лучше решить эту проблему? Нужна ли мне какая-то специальная конфигурация CSS?

Сгенерированный код HTML:

 

<голова><название>
<метакодировка="iso-8859-1" />




<тело
>
<а
> <дел> <таблица
ячейки = "0" ячейки = "0"
> 
<тр
class="hline">
<тд
класс="td11">
Тест А 
 
ТестБ 
<тд
класс="td11"> 
<тд
класс="td11"> 
<тд
класс="td11">
 
<тд
класс="td11">
 
<тд
класс="td11">  
   


 

Обновление

Я обнаружил, что если вручную отредактировать HTML и заменить

 <тр
 

С

 <тр
 

Тогда это работает!

Однако я не могу найти правильный CSS для добавления в мой .cfg, чтобы указать tex4ht использовать этот стиль для tr . Так что мне просто нужно понять эту часть.

Я добавил

 \Css{tr {vertical-align:top;}}
 

в мой .cfg, но это не действует. Сгенерированный HTML по-прежнему показывает . Так что теперь я понятия не имею, как перезаписать это, и не знаю, где tex4ht устанавливает vertical-align:baseline чтобы изменить его!

Модифицировать стиль CSS в tex4ht очень сложно, так как существует так много классов, и я никогда не уверен, какой из них изменить.

TL 2019

Вертикальное выравнивание не работает - HTML и CSS - Форумы SitePoint

skinnman 16 декабря 2010 г., 16:34

#1

Перерыл всю сеть и на этом форуме поиском, но ответа не нашел. Похоже, я использую вертикальное выравнивание прямо в своем css, но оно просто не работает. Вот мой css:

.models {
ширина: 38em;
высота: 6,5 см;
цвет фона: #4F0000;
цвет:#FFF;
размер шрифта:. 8em;
заполнение: 4px 4px 4px 4px;
нижняя граница: 6px;

}
img.models {
выравнивание по вертикали: посередине;
}

HTML:


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

скинман 16 декабря 2010 г., 16:45

#2

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

система 16 декабря 2010 г. , 19:21

#3

один из способов сделать это

<голова>
<название>
<тип стиля="текст/CSS">
.модели {
ширина: 38см;
высота: 6,5см;
цвет фона: #4F0000;
цвет:#FFF;
размер шрифта: .8em;
заполнение: 4px 4px 4px 4px;
нижняя граница: 6px;
положение: родственник;
}
.модели изображения {
положение: абсолютное;
верх: 50%;
margin-top: -30px /* половина высоты изображения */
}
 


<тело>
 
<дел>
      

 
        

<голова>
  
  
  
  <тип стиля="текст/CSS">
.модели {
  цвет фона: #4F0000;
  цвет: #FFF;
  дисплей: таблица;
  размер шрифта: .8em;
  высота: 6,5см;
  нижняя граница: 6px;
  отступ: 4px;
  выравнивание текста: по центру;
  ширина: 38см;
  }
.models охват {
  отображение: таблица-ячейка;
  вертикальное выравнивание: посередине;
  }
  
  

<тело>
  <дел>