html - 按钮内的图像和文本

Question

所以我在使用这 3 个按钮时遇到了一点问题。我想要的是图像底部的文本与按钮的中心对齐，当然上面的图像也居中。

现在的样子:

代码:

    <div id="box">

        <button onclick="Edit();"><img src="images/edit.png" alt="Editar Conteúdo" /><span>Editar Conteúdo</span></button>

        <button onclick="Users();"><img src="images/users.png" alt="Utilizadores" /><span>Gerir Utilizadores</span></button>

        <button onclick="Logout();"><img src="images/logout.png" alt="Logout" /><span>Logout</span></button>

    </div>

CSS:

#box {
max-width:699px;
width:100%;
margin-left:auto;
margin-right:auto;
}

button{
font-family:Consolas, sans-serif;
background-color:white;
border:3px solid #EBEBEB;
border-radius:5px;
max-width:230px;
height:auto;
min-height:150px;
width:100%;
transition: all .2s ease-in-out;
padding: 1px 6px 1px 6px;
}

button:hover {
transform: scale(1.09);
}

button > * {  
vertical-align: middle;  
}

Answer 1

在图像和跨度之间强制换行应该可以解决问题。例如:

<img src="images/edit.png" alt="Editar Conteúdo" /><br /><span>