Nano Hash - криптовалюты, майнинг, программирование

CSS вертикальное выравнивание изображения с текстом не работает (Wordpress)

Поэтому я пытаюсь выровнять файл изображения по вертикали в середине div с текстом справа на моей мобильной теме Wordpress. К сожалению, использование «vertical-align:middle» на изображении приводит к следующему:

Вот мой CSS:

        <div <?php post_class('post clearfix'); ?> id="post-<?php the_ID(); ?>">
    <div style="vertical-align:middle"><?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail('post', 'secondary-image');  endif; ?></div>
<h2 class="title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'themater' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
             <div class="postmeta-primary-fp">

           <?php echo get_the_date(); ?></div>

               <div class="postmeta-primary-fp"> <?php if(comments_open( get_the_ID() ))  {
                    ?><span class="meta_comments"><?php comments_popup_link( __( '<b>0</b> comments', 'themater' ), __( '<b>1</b> comment', 'themater' ), __( '<b>%</b> comments', 'themater' ) ); ?></span><?php
                } ?>
        </div>

Любая помощь будет принята с благодарностью!

wordpress image vertical-alignment html css
14.10.2012

Ответы:


1

Создайте родительский div для хранения изображения и текста, поместите изображение в левый плавающий div, с высотой строки, установленной на высоту div, и вертикальное выравнивание, установленное посередине, затем добавьте правый плавающий div для текста. Что-то типа:

<div style="width:400px;">
    <div style="float:left;width:50px;height:50px;line-height:50px;vertical-align:middle;">
        <img src="imageurl" />
    </div>

    <div style="width:380px;float:left;height:50px;">
        Text here
    </div>
</div>

И если вы хотите, чтобы текст выровнялся по центру изображения, установите его высоту строки, равную высоте div, и вертикальное выравнивание по середине.

14.10.2012
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..