Вертикально выравнивать текст рядом с изображением?

Почему не будет vertical-align: middle работа? И все же, vertical-align: top работает.

 
Doesn't work.

    20 Solutions collect form web for “Вертикально выравнивать текст рядом с изображением?”

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

      
    Works.

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

    Однострочное выравнивание по вертикали: среднее

    Это легко: установите высоту строки текстового элемента так же, как и в контейнере

     
    Doesn't work.

    Несколько строк по вертикали: нижний

    Абсолютно поместите внутренний div относительно его контейнера

     
    This is positioned on the bottom

    Несколько строк по вертикали: средний

     
    This is positioned in the middle

    Если вы должны поддерживать древние версии IE < = 7

    Чтобы это правильно работало по всем направлениям, вам придется немного взломать CSS. К счастью, есть ошибка IE, которая работает в нашу пользу. Настройка top:50% на контейнере и top:-50% на внутреннем div, вы можете добиться того же результата. Мы можем комбинировать эти два варианта с помощью другой функции IE не поддерживает: расширенные селектора CSS.

      

    Works in everything!

    Переменная высота контейнера по вертикали: средняя

    Для этого решения требуется несколько более современный браузер, чем другие решения, поскольку он использует свойство transform: translateY . ( http://caniuse.com/#feat=transforms2d )

    Применение следующих трех строк CSS к элементу будет вертикально центрировать его внутри родителя независимо от высоты родительского элемента:

     position: relative; top: 50%; transform: translateY(-50%); 

    Измените свой div на гибкий контейнер:

     div {display:flex;} 

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

    Способ 1:

     div {align-items:center;} 

    DEMO


    Способ 2:

     div * {margin-top:auto; margin-bottom:auto;} 

    DEMO


    Попробуйте различные значения ширины и высоты на img и разные значения размера шрифта на span и вы увидите, что они всегда остаются в середине контейнера.

    Вы должны применять vertical-align: middle к обоим элементам, чтобы оно было идеально центрировано.

     
    Perfectly centered

    Техника, используемая в принятом ответе, работает только для однострочного текста ( demo ), но не для многострочного текста ( demo ) – как отмечено там.

    Если кому-то нужно вертикально центрировать многострочный текст на изображение, вот несколько способов (методы 1 и 2, вдохновленные этой статьей CSS-Tricks )

    Метод №1: таблицы CSS ( FIDDLE ) (IE8 + ( caniuse ))

    CSS:

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

    Метод №2: Псевдоэлемент на контейнере ( FIDDLE ) (IE8 +)

    CSS:

     div { height: 200px; /* height of image */ } div:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } img { position: absolute; } span { display: inline-block; vertical-align: middle; margin-left: 200px; /* width of image */ } 

    Метод №3: Flexbox ( FIDDLE ) ( caniuse )

    CSS (приведенная выше скрипта содержит префиксы поставщика):

     div { display: flex; align-items: center; } img { min-width: 200px; /* width of image */ } 

    Этот код работает как в IE, так и в FF:

     
    It does work on all browsers

    Потому что вам нужно установить line-height на высоту div, чтобы это работало

    В принципе, вам придется перейти к CSS3.

     -moz-box-align: center; -webkit-box-align: center; 

    Для записи «команды» выравнивания не должны работать в SPAN, потому что это тег в строке , а не тег уровня блока . Такие вещи, как выравнивание, маржа, отступы и т. Д., Не будут работать на встроенном теге, поскольку точка inline не нарушает stream текста.

    CSS делит HTML-tags на две группы: в строке и блочном уровне. Поиск «css block vs inline» и отличная статья https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image/

    http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

    (Понимание основных принципов CSS – это ключ к тому, что это не слишком раздражает)

    Другое, что вы можете сделать, это установить line-height текста в размере изображений в

    . Затем установите для изображений vertical-align: middle;

    Это самый простой способ.

    Используйте line-height:30px для диапазона, чтобы текст выравнивался с изображением:

     
    Doesn't work.

    Я еще не видел решения с margin в любом из этих ответов, так что вот мое решение этой проблемы.

    Это решение работает только в том случае, если вы знаете ширину вашего изображения.

    HTML-код

     
    This is my very long text what should align. This is my very long text what should align.

    CSS

     div { overflow:hidden; } img { width:80px margin-right:20px; display:inline-block; vertical-align:middle; } span { width:100%; margin-right:-100px; padding-right:100px; display:inline-block; vertical-align:middle; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } 
     background:url(../images/red_bullet.jpg) left 3px no-repeat; 

    Обычно я использую 3px вместо top . Увеличивая / уменьшая это значение, изображение можно изменить на требуемую высоту.

    Напишите эти свойства span

     span{ display:inline-block; vertical-align:middle; } 

    Использовать display:inline-block; Когда вы используете свойство vertical-align property.Those – ассоциированные свойства

    Например, на кнопке в jQuery mobile вы можете немного ее настроить, применив этот стиль к изображению:

     .btn-image { vertical-align:middle; margin:0 0 3px 0; } 

    Вы можете установить изображение как inline element используя свойство display

     
    Works.

    Многолинейное решение:

    http://jsfiddle.net/zH58L/6/

     
    Multiline text centered vertically

    Работает во всех browers и ie9 +

    Я могу согласиться. Попробуйте использовать функции таблицы. Я использую этот простой трюк CSS для позиционирования модалов в центре веб-страницы. Он имеет большую поддержку браузера:

     
    http://sofru.miximages.com/css/.. It works now

    и часть CSS:

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

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

    Во-первых, встроенный CSS не рекомендуется вообще, это действительно испортит ваш HTML.

    Для выравнивания изображения и диапазона вы можете просто выполнить vertical-align:middle .

     .align-middle { vertical-align: middle; } 
     
    I'm in the middle of the image! thanks to CSS! hooray!

    Вы, вероятно, захотите этого:

     
    Didn't work.

    Как и другие, попробуйте vertical-align по изображению:

     
    Didn't work.

    CSS не раздражает. Вы просто не читаете документацию . ;П

    Interesting Posts

    Комбинация клавиш быстрого доступа Outlook для перемещения сообщения в другую папку

    Я хочу, чтобы виртуализировать свою рабочую станцию ​​(уровень 1), искать гипервизор Bare Metal для компонентов потребительского класса

    Температура процессора очень горячая в BIOS, но в режиме RealTemp / Speedfan

    Как ускорить передачу данных между локальными компьютерами в сети WiFi?

    Запретить исходящий трафик, если соединение OpenVPN не активно, используя pf.conf в Mac OS X

    Как включить привязку к сетке по умолчанию в Mac OS X?

    Блокировать все порты, кроме SSH / HTTP, в ipchains и iptables

    Почему я должен часто перестраивать кеш иконки в Windows 7?

    Модем -> Брандмауэр -> Коммутатор -> Беспроводная связь?

    Где настроены значки папок в Thunderbird?

    Настроить десятичный разделитель в импортированных диаграммах

    Как играть в MP3-файлы на вход микрофона

    Ширина кнопок панели задач Windows

    Как добавить звездочку в текстовый редактор MS Word

    Vimperator. Настройка внешнего редактора в Windows XP

    Давайте будем гением компьютера.