изображение и текст не выравниваются по центру?

Question

изображение и текст не выравниваются по центру?

0

Я пытаюсь сделать изображение и текст посередине.

  <div class="topHeader">
    <img src="Images/loginheader.jpg" />
    <span> Sample text</span>                        
  </div>

div.topHeader {
   height:70px;
   background-color:#868686;
   font-family: Segoe UI;
   font-size:40px;
   padding-left:30px;
}

JSFiddle

James123 13 март 2014, в 18:53

Источник

1

добавить выравнивание текста: по центру;
Juan Castillo 13 март 2014, в 17:52
1

и удалите padding-left, немного прибегая к помощи, может решить эту проблему ... или немного знаний css
Huangism 13 март 2014, в 17:53
0

Мне нужно отступить слева, чтобы переместить изображение и текст немного дальше
James123 13 март 2014, в 17:56
3

Я действительно плохо в CSS, и если вам, ребята, не нравится этот пост. Я удалю это.
James123 13 март 2014, в 17:57
0

хмммммм посередине, ... вертикально или горизонтально?
frikinside 13 март 2014, в 18:00
0

выравнивание текста: центр не работал
James123 13 март 2014, в 18:00
0

@James123 James123 Так как <img> и <span> являются встроенными элементами (соответственно заменены и не заменены), вы можете выровнять их по горизонтали, используя text-align: center для родительского элемента, который является .topHeader как: jsfiddle.net/FrR72/5
Hashem Qolami 13 март 2014, в 18:00
0

@SamotnyPocitac Это просто грубо. Расти.
Jezen Thomas 13 март 2014, в 18:02
0

а затем использовать отступы для текста
SamotnyPocitac 13 март 2014, в 18:02
0

Я не хочу изображения и текстового центра страницы. Я хочу, чтобы оба равных выравнивали. Я имею в виду текст, показывающий нижнюю часть изображения.
James123 13 март 2014, в 18:04
0

@James123 James123 Но для вертикального выравнивания вы можете использовать div.topHeader img { vertical-align: middle; } as: jsfiddle.net/FrR72/6
Hashem Qolami 13 март 2014, в 18:05
0

Возможный дубликат Как я могу вертикально выровнять текст рядом с изображением с помощью CSS?
Hashem Qolami 13 март 2014, в 18:34

Показать ещё 10 комментариев

Теги:

html

css

2 ответа

Ещё вопросы

добавить выравнивание текста: по центру;
и удалите padding-left, немного прибегая к помощи, может решить эту проблему ... или немного знаний css
Мне нужно отступить слева, чтобы переместить изображение и текст немного дальше
Я действительно плохо в CSS, и если вам, ребята, не нравится этот пост. Я удалю это.
хмммммм посередине, ... вертикально или горизонтально?
выравнивание текста: центр не работал
@James123 James123 Так как <img> и <span> являются встроенными элементами (соответственно заменены и не заменены), вы можете выровнять их по горизонтали, используя text-align: center для родительского элемента, который является .topHeader как: jsfiddle.net/FrR72/5
а затем использовать отступы для текста
Я не хочу изображения и текстового центра страницы. Я хочу, чтобы оба равных выравнивали. Я имею в виду текст, показывающий нижнюю часть изображения.
@James123 James123 Но для вертикального выравнивания вы можете использовать div.topHeader img { vertical-align: middle; } as: jsfiddle.net/FrR72/6
Возможный дубликат Как я могу вертикально выровнять текст рядом с изображением с помощью CSS?

T J · Answer 1 · 2014-03-13T16-34-00.000Z

Подать выражение

display:table; к вашему контейнеру и display:table-cell; vertical-align:middle; display:table-cell; vertical-align:middle; к пролету.

проверьте это: FIDDLE

user1577303 · Answer 2 · 2014-03-13T16-05-00.000Z

Добавьте img{float:left} и div.topHeader{line-height:70px}.

Фактически, использование line-height равной высоте вашего div, будет центрировать однострочный текст (и изображение) по вертикали. Просто не забудьте сделать изображение для плавания, чтобы написать текст в той же строке, что и изображение. Скрипт.