Выравнивание IMG и текста в диапазоне с помощью CSS

Question

Я пытаюсь сделать кнопку с изображением в ней с помощью span. Следующие работы, но проблема в том, что текст выравнивается по вертикали, но кнопка сохранения img is'nt. Мне нужно, чтобы все содержимое было вертикально выровнено по середине. Что не так с моим кодом?

.ButtonSPAN{ 
display:inline-block; 
color: white; 
background-color:#00537B; 
border: 1px solid #1E90FF; 
height: 25px; 

padding:3px; 
vertical-align:middle; 
font-weight: bold; 
} 
.ButtonSPAN:hover{ 
color: #F0E68C; 
cursor: hand; cursor: pointer; 
} 

<span class="ButtonSPAN"><img src="/common/images/save.png" onclick="Save()">&nbsp;Save</span> 

Answer 1

[Обновлено] Оберните "Сохранить" в span, и добавить в CSS

.ButtonSPAN{ 
    line-height:25px; 
} 

.ButtonSPAN *{ 
    vertical-align:middle; //Align everything nested in .ButtonSPAN to the middle 
} 

Демо here

Answer 2

Есть некоторые считают, что могли бы работать. Моим первым вариантом было бы поместить изображение как background:url(image_path), чтобы охватить и дать высоту, ширину и границу, чтобы выровнять его правильно. Вы можете поместить несколько фонов и просто добавить привязку туда, где вы хотите, чтобы ваш клик был, или сделать весь ваш клик доступным. Второй вариант заключается в выравнивании этого изображения с помощью vertical-align:middle. Третий - это отредактировать это изображение, чтобы прозрачное пространство над изображением.

Надеюсь, что-то от этого поможет!

Answer 3

Есть несколько вариантов здесь:

вы можете применить изображение в качестве фонового рисунка на пролет:

.ButtonSPAN{ 
    background:#00537B url(/common/images/save.png) 3px center no-repeat; 
} 

вы должны положить ваши onClick="save()" ваши span элемента.

Background-image property

ИЛИ, если вы знаете высоту изображения, это должно работать:

(Я предполагая высоту изображения 16px)

.ButtonSPAN{ 
    position:relative; 
} 
.ButtonSPAN img{ 
    position:absolute; 
    top:50%; 
    margin-top:-8px; 
} 

или, альтернативно, смотрите при этом page

PS Хорошая практика - начинать имена классов с строчной буквы.

Answer 4

Как вы оставляете как текст и изображения в одном span элемента, вы должны работать вокруг, как показано на рисунке скрипкой:

Working Fiddle

Здесь я добавил marign-bottom:-3px, чтобы сделать это выглядите как посредине с текстом.

.ButtonSPAN img{ 
    margin-bottom:-3px; /* fix until the img comes to mid */ 
    width:16px;height:16px; /* giving fixed widths for demo */ 
} 

Я также удалил vertical-align из .ButtonSPAN класса и добавил line-height, равную значению высоты вместо этого.

Answer 5

Отъезд this fiddle, иллюстрирующий различные значения, доступные для vertical-align. Ваш пример CSS показывает, что вы применяете inline-block к родительскому (.ButtonSPAN), что не поможет выравнивать содержимое внутри.

Самый простой способ добиться того, что вы после этого, чтобы обернуть текст в отдельном span, а затем использовать это:

<button><img src="http://placehold.it/36x36"> <span>Middle</span></button> 

button { 
    color: white; 
    background-color:#00537B; 
    border: 1px solid #1E90FF; 
    padding: 3px; 
    font-weight: bold; 
} 

img, span { 
    display: inline-block; 
    vertical-align: middle; 
} 

Вот скриншот из выше jsFiddle. Я сделал изображение немного больше, и учитывая spanbackground-color лучше иллюстрируют варианты: