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

Я пытаюсь центрировать по вертикали изображение, которое будет моей кнопкой отправки. У меня есть этот HTMLНевозможно вертикально центрировать мое изображение

<div style="display:inline-block; vertical-align:middle"><input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"></div>

, а затем этот класс, привязанный к изображению

.search_button { 
     vertical-align: middle; 
}

Однако изображение все еще выравнивается по верхней части DIV. Изображение разбито посередине, но вы можете видеть выравнивание текста в верхней части - https://jsfiddle.net/hLn6fv49/. Как выровнять по вертикали?

источник

2016-08-23 Anonymous

[Фактическое руководство по центрированию в CSS] (https://css-tricks.com/centering-css-complete-guide/) – neilsimp1

Я прочитал это руководство целиком, и ответа там нет. –

Вы должны выровнять все дивы:

div#statSearchFields div { 
    vertical-align: middle; 
}

источник

2016-08-23 19:53:55 Vcasso

Я не хочу выровнять все остальные DIV - я хочу, чтобы другие DIVs оставались вертикально точно там, где они есть. Единственное, что я хочу, чтобы перейти в середину, - это DIV, содержащий этот образ поиска. –

Остальные два divs не будут двигаться. Просто добавьте фрагмент выше к своей скрипке и попробуйте. Когда вы выровняете все три divs в середине, первые два div остаются неизменными, потому что они одинаковой высоты. Таким образом, все три div должны быть выровнены в середине. – Vcasso

.searchField {display: inline-block; vertical-align: bottom;}

привести его к нижней части контейнера поля. И вы можете удалить встроенный вертикальный выравнивать ... и выравнивать на самой кнопке ...

fiddle update

источник

2016-08-23 19:54:10 Scott

Я не хочу выровнять его по низу. Я хочу выровнять его по середине (в центре). –

Диди ты * смотри * на скрипке ??? – Scott

Вы можете использовать display: table; и display: table-cell;.

Take a look here.

источник

2016-08-23 20:05:13

На каких элементах я применяю эти атрибуты стиля? –

Перейдите по ссылке. Все, что вам нужно, есть. :) –

Для достижения ожидаемого результата, используйте ниже

HTML:

<div class="test" style="display:inline-block; vertical-align:middle"><input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"></div> 
</div>

CSS:

.test{ 
    position:absolute; 
    top:50%; 
}

https://jsfiddle.net/Nagasai_Aytha/hLn6fv49/4/

источник

2016-08-23 20:40:17

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

ответ

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