按钮内的图像和文本

Question

我在使用这三个按钮时遇到了一些问题。我想要的是图像下方的文本居中对齐，当然还需要将上面的图像居中。

目前的样式如下：

代码如下：

    <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;  
}

- rui404

---

在每张图片后面加上一个<br />不就可以解决问题了吗？ - j08691

我为什么没想起来呢？非常感谢！ - rui404

Answer 1

强制在图像和span之间插入换行符即可解决问题。例如:

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

- j08691