Не может центрировать выровнять элемент изображения по вертикали

Все:Не может центрировать выровнять элемент изображения по вертикали

Я довольно новый для макета CSS, в настоящее время у меня есть очень простой макет:

http://placehold.it/16/16

span.icons { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background-color: lightblue; 
 
    text-align: center; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
<span class="icons"> 
 
\t <img src="http://placehold.it/16/16" /> 
 
</span> 
 
</body> 
 
</html>

Это так странно , потому что тот же HTML работает очень хорошо, когда я вставляю его в этот вопрос и запускаю его здесь, но он просто не работает в моем локальном, даже я использую тот же браузер, вот что он выглядит в моем локальном:

То, что я хочу сделать, это центр выравнивать (только по вертикали будет хорошо) изображение (16 на 16 пикселей), но изображение всегда в верхнем центре.

Может ли кто-нибудь помочь центру выровнять его и немного пояснить с помощью ПОЧЕМУ сейчас он не работает?

Thansk

источник

2016-02-24 Kuan

добавить 'запас: 0 авто;' к вашему CSS? – ochi

@ochi Спасибо. U означает img? – Kuan

Можете ли вы добавить дополнительные сведения о остальной части HTML и CSS? – ochi

Указанный код работает как требуется, но я заметил, что ни один DOCTYPE не было были объявлены. Это может привести к тому, что браузер войдет в Quirks Mode .... что приведет к непоследовательному отображению страницы.

Связанные Do modern browsers care about the DOCTYPE?

span.icons { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background-color: lightblue; 
 
    text-align: center; 
 
}

<span class="icons"> 
 
    <img src="http://lorempixel.com/image_output/nature-q-g-16-16-7.jpg"/> 
 
</span>

Конечно, в эти дни, я бы использовал Flexbox:

span.icons { 
 
    display: inline-flex; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: lightblue; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<span class="icons"> 
 
    <img src="http://lorempixel.com/image_output/abstract-q-c-16-16-1.jpg"> 
 
</span>

источник

2016-02-24 19:28:25

Спасибо, код работает, если я просто щелкнул, чтобы открыть его в stackoverflow, как только я скопирую его на свой локальный и открою в том же браузере, он не работает снова. – Kuan

код в моем вопросе - это все. – Kuan

Это так странно, когда я вставляю один и тот же html внутри runloader кода stackoverflow, он работает очень хорошо, пока он не работает в моем локальном, даже я использую тот же браузер (если u запускает html в моем вопросе, он работает, то есть тот же html, который я копирую из своего локального)! – Kuan

Вы имеете в виду что-то по бокам этого?

span.icons { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background-color: lightblue; 
 
    text-align: center; 
 
}

<span class="icons"> 
 
    <img src="http://placehold.it/16/16"> 
 
</span>

Относительно того, почему ваш код не работает:

определение DOCTYPE разница

источник

2016-02-24 19:15:28 ochi

Спасибо, но он не работает на моей стороне, когда я запускаю код ur. Я хочу, чтобы это изображение выравнивало центр по вертикали – Kuan

Хммм, тогда что-то еще может быть в игре. Вы обновили 'width' из CSS' span.icons'? – ochi

Я думаю, что ширина не имеет значения. Я использую пример ура, и он все еще не работает – Kuan

-2

Только т чень добавление

vertical-align: middle;

https://jsfiddle.net/5ky6jLuj/1/

источник

2016-02-24 19:29:18 Dani

Спасибо, но это не работает на моей стороне – Kuan

Не может центрировать выровнять элемент изображения по вертикали

ответ

Смежные вопросы