圖像和按鈕內的文字

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>