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

Почему не будет 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

    Преобразование тома NTFS в exFAT (без потери содержимого)

    Использование ffmpeg для вырезания видео

    Приостановка современного пользовательского интерфейса к панели задач

    Сохранение папки локальных окон в синхронизации с удаленной ftp-папкой в ​​режиме реального времени

    Перемещение всех файлов вложенных папок в другую папку

    Архивировать точку восстановления постоянно?

    Настройка make-файла для запуска при смене файла

    Mount cifs для 2 пользователей

    «Запустить> Остановить на исключении Objective-C» в Xcode 4?

    Как переместить профиль Chrome, а также открыть новые ссылки с перемещенным профилем?

    VBA Excel 2007 помогает ускорить код, чтобы скрыть строки

    Jquery live () vs delegate ()

    Установка VirtualBox 5.0.10 на последнюю версию Windows 10 (версия 1511, 10586)

    Почему Vim может открывать большие файлы быстрее, чем некоторые другие текстовые редакторы?

    Беспроводной адаптер внезапно не обнаруживает сеть

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