Центрировать по вертикали абзац в элементе div [duplicate]

0

Я хочу центрировать вертикальный абзац в div. Для этого я попытался добавить изображение перед моим текстом, и я добавлю на нем css "vertical-align: middle".

Первая строка моего текста вертикально выровнена: это хорошо, но вторая строка находится под моим div.

Как я могу решить свою проблему?

Thks

МОЙ JS FIDDLE

div {
    height:200px;
    width:200px;
    text-align:center;
    background:cyan;
    position:absolute;
}

span {
    height:inherit;
    width:inherit;
    position:absolute;
    left:0;
    background: yellow;
    text-align:center 
}

img {
    height:100%;
    vertical-align:middle;
    width:3px;}
}
  • 0
    Вы указываете, что изображение имеет высоту 100%, в качестве встроенного элемента любая следующая строка будет начинаться ниже 100%, что в вашем случае ниже div.
  • 0
    Следует отметить, что в вашей скрипке нет параграфа!
Теги:
image
vertical-alignment
center

1 ответ

1

Вы можете использовать display:table css:

div {
    height:200px;
    width:200px;
    background:cyan;
    display:table;
}

span {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

пример

Поделиться
  • 0
    Мне нужно, чтобы мой div имел "display: inline-block"
  • 0
    @Bonjour, просто добавьте дополнительный div внутри и задайте стиль таблицы: jsfiddle.net/peteng/nSk5r/5
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню