сделать текст в середине div или изображения

0

У меня есть этот html

<div class="vmpLogoClass">
     <span style="margin-top:10px; vertical-align:middle">Powred by:</span>
     <img alt="vmplogo" src="images/inconcert_logo.png" style="float:right;" />
</div>

и это css:

.vmpLogoClass {
    width:29%;
    float:right;
    text-align:right;
}

Это результат: Изображение 174551

Мне нужен текст, который будет в центре. Я имею в виду не вверху изображения.

Я попытался дать margin-top, но кажется, что маржинальная вершина ничем не повлияла.

  • 0
    Попробуйте использовать, line-height: (the height of the image) px;
  • 0
    @CTravel, который работает. Благодарю. Напишите ответ, пожалуйста.
Показать ещё 1 комментарий
Теги:

3 ответа

3
Лучший ответ

Попробуйте использовать, line-height: (the height of the image) px;

В моем случае с тем же логотипом это должно быть:
Css:

span { line-height:104px;}

Проверьте DEMO

Поделиться
1

вы можете попробовать это

.vmpLogoClass {
float:right;
}
.vmpLogoClass span, .vmpLogoClass img{
    display:inline-block;
    vertical-align: middle;

}

демонстрация

Поделиться
0

Сначала удалите Class из вашего имени класса и удалите метки стиля из разметки HMTL.

<div class="vmpLogo">
     <span>Powered by:</span>
     <img alt="vmplogo" src="http://www.crossfone.com.ar/imgs/logo_inconcert.jpg" />
</div>


.vmpLogo {
    text-align: center;
    width:100%;
}

.vmpLogo span {
    display: block;
}

.vmpLogo img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

http://jsfiddle.net/J7wUs/

Изображение 174551

Поделиться
  • 0
    К сожалению, я неправильно прочитал, что вы хотели, чтобы текст был оставлен на изображении. Виноват.
  • 0
    Вы можете изменить свою разметку, чтобы использовать встроенный список (например, <ul> ) и поместить верхний отступ для содержимого в первом элементе.

Ещё вопросы

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