Question

我正试图垂直居中一个将成为我提交按钮的图像。我有这个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的顶部对齐。图像在中间断开，但您可以看到alt文本与顶部对齐 - https://jsfiddle.net/hLn6fv49/。如何垂直对齐？

Answer 1

你必须对齐所有div：

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

Answer 2

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

将其对齐到字段容器的底部。你可以删除内联vertical-align ...和按钮本身的对齐......

<强> fiddle update

Answer 3

您可以使用display: table;和display: table-cell;。

Take a look here.

：）

Answer 4

要达到预期效果，请使用以下

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/

无法垂直居中我的图像

4 个答案: