Как по центру выровнять небольшое изображение с текстом по центру как по горизонтали, так и по вертикали?

0

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

Так что для горизонтальных я дал text-align: center; для вертикального утра не хватает, потому что размер изображения и фактическое изображение немного отличаются друг от друга, это формат png, чтобы вы могли видеть прозрачность. В изображении есть дополнительное пространство, чтобы оно отображалось сверху.

Как сделать текст и изображение одинаковым, а также выравнивать по центру. Любая идея была бы полезной

Вот css Отредактировано после того, как задан вопрос

.click
{
    width:50%;
    height:50%;
    background-color:red;
    text-align:center;
    position:absolute;

}

JSfiddle Эффект абсолютной позиции? Потому что в моем локальном я не могу выровнять его, как в скриптовых ответах

  • 0
    Да, это заставляет display: block; Но вы можете просто превратить элемент в другой и присвоить внешнему положение: абсолютное; Я обновлю свой ответ.
Теги:
image

4 ответа

2

Просто обработайте div как ячейку таблицы, установив display: table-cell; стоимость. Затем вы можете использовать vertical-align: middle; для выравнивания содержимого.

ОБНОВЛЕНИЕ: для абсолютного позиционирования оберните div в внешний div и примените там положение.

<div class="wrapper">
    <div class="click">
        Thumbs up <img src="http://i.stack.imgur.com/nC5s4.png">
    </div>
</div>

.wrapper {
    position: absolute;
    top: 100px;
    left: 100px;
}
.click
{
    width:50%;
    height:50px;
    background-color:red;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}
img {
    vertical-align: middle;
}

играть на скрипке

Поделиться
  • 0
    Высота обязательна?
  • 0
    Нет, я просто добавил больше высоты, чтобы увидеть эффект. И имейте в виду, что процентные значения относятся к измерениям родительских элементов.
Показать ещё 1 комментарий
1

Дайте текст и изображение отдельно вертикально-выровненным: средний стиль

Что-то вроде этого:

<div class="click">
    <span class="valign">Thumbs up</span> 
    <img src="http://i.stack.imgur.com/nC5s4.png" class="valign"/>
</div>

А потом:

.valign {    
   vertical-align:middle;
}

Тест здесь: JSFiddle

Или альтернативой было бы установить контейнер div

display: table-cell;
vertical-align: middle;

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

vertical-align: middle;
Поделиться
  • 0
    Первый сам работает правильно. В чем преимущество в альтернативе
  • 0
    Никаких преимуществ ни для одного из решений. Просто вопрос личных предпочтений, которые вы хотите использовать. Но первое решение включает в себя дополнительный <span> вокруг вашего текста.
Показать ещё 2 комментария
1

Используйте display:table-cell для div и vertical-align:middle для контента. Скрипт здесь: http://jsfiddle.net/xqDu7/10/

Поделиться
  • 0
    Извините, я забыл включить это положение: абсолютное; сейчас не получаю это в центре
  • 0
    Спасибо +1, проверьте мою правку.
Показать ещё 2 комментария
0 
.click
{
    position:absolute;
    left:50%;
    top:50%;
    width:220px;
    height:40px;
    background-color:red;
    text-align:center;
    margin-top: -20px;
    margin-left: -110px;
}

http://jsfiddle.net/xqDu7/9/

Поделиться
  • 0
    Он хочет, чтобы содержимое div было выровнено, а не сам div ... ;-)

Ещё вопросы

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