CSS+中的多个按钮；图像显示不正确的按钮

目前正试图为我的小公司建立一个网页。让我们说，我已经有一段时间没有编码了，我以前从未使用过CSS

以下是我的问题：

问题#1 我有几个按钮（7）在一行，我的最后一个按钮里面有一个图像而不是文本
内部有图像的按钮与其他按钮不对齐！

我将我的

img

从25px降低到15px

高度

，但按钮仍然停留在上边框
我在.myButton中添加了

height:100px

以测试它是否仍然是图像。。。但正如你在这张照片上看到的。。。这不是问题所在。（我已经更新了我的新代码）

问题#2（已解决，谢谢！！！） 我想创造所有的按钮平等！现在它们都有不同的长度我怎么能这么做

这是我当前的代码！谢谢

身体{
保证金：0；
填充：0；
文本对齐：居中；/**/
}
#钮扣{
保证金：0自动；
背景色：#eeeeee；
宽度：768px；
填充：0px；
显示器：flex；
}
.我的按钮{
-moz盒阴影：插入0px 1px 0px 0px#fff6af；
-网络工具包盒阴影：插入0px 1px 0px 0px#fff6af；
方框阴影：插入0px 1px 0px 0px#fff6af；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#f0e1b7）、颜色停止（1，#f7be14））；
背景：-莫兹线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：-webkit线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：-o-线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：-ms线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：线性梯度（至底部，#f0e1b7 5%，#f7be14 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#f0e1b7'，endColorstr='#f7be14'，GradientType=0）；
背景色：#f0e1b7；
-moz边界半径：6px；
-webkit边界半径：6px；
边界半径：6px；
边框：2个实心#969187；
显示：内联块；
光标：指针；
颜色：#333333；
字体系列：arial；
字体大小：12px；
字体大小：粗体；
填充：5px16px；
文字装饰：无；
文本阴影：0px 1px 0px#ffee66；
宽度：70px；
高度：100px；
}
.myButton:悬停{
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#f7be14）、颜色停止（1，#f0e1b7））；
背景：-莫兹线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：-webkit线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：-o-线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：-ms线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：线性梯度（至底部，#f7be14 5%，#f0e1b7 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#f7be14'，endColorstr='#f0e1b7'，GradientType=0）；
背景色：#f7be14；
}
.myButton:活动{
位置：相对位置；
顶部：1px；
}

---

图像按钮未对齐的原因是其内部内容大于文本，有两种解决方案：

降低按钮内图像的高度

通过手动计算图像按钮的高度并进行匹配（可通过

中的
高度：100px
来实现）来增加文本按钮的高度

关于第二个问题（相同宽度），设置

宽度：90px；

---

在

.myButton

中，可以在按钮之间实现相同的宽度（将90更改为您认为最好的数字）。

要使所有按钮具有相同的大小，可以使用灵活的框：

#按钮{
显示：flex；/*相同高度*/
}
.我的按钮{
宽度：100%；/*相同宽度*/
}

要使文本在按钮内垂直居中，也可以使用灵活的框：

.myButton{
显示器：flex；
对齐项目：居中；/*垂直居中*/
对齐内容：居中；/*水平居中*/
}

#按钮{
保证金：0自动；
背景色：#eeeeee；
宽度：768px；
填充：0px；
}
.我的按钮{
-moz盒阴影：插入0px 1px 0px 0px#fff6af；
-网络工具包盒阴影：插入0px 1px 0px 0px#fff6af；
方框阴影：插入0px 1px 0px 0px#fff6af；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#f0e1b7）、颜色停止（1，#f7be14））；
背景：-莫兹线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：-webkit线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：-o-线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：-ms线性梯度（顶部，#f0e1b7 5%，#f7be14 100%）；
背景：线性梯度（至底部，#f0e1b7 5%，#f7be14 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#f0e1b7'，endColorstr='#f7be14'，GradientType=0）；
背景色：#f0e1b7；
-moz边界半径：6px；
-webkit边界半径：6px；
边界半径：6px；
边框：2个实心#969187；
显示：内联块；
光标：指针；
颜色：#333333；
字体系列：arial；
字体大小：14px；
字体大小：粗体；
填充：5px16px；
文字装饰：无；
文本阴影：0px 1px 0px#ffee66；
}
.myButton:悬停{
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#f7be14）、颜色停止（1，#f0e1b7））；
背景：-莫兹线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：-webkit线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：-o-线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：-ms线性梯度（顶部，#f7be14 5%，#f0e1b7 100%）；
背景：线性梯度（至底部，#f7be14 5%，#f0e1b7 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#f7be14'，endColorstr='#f0e1b7'，GradientType=0）；
背景色：#f7be14；
}
.myButton:活动{
位置：相对位置；
顶部：1px；
}
#钮扣{
显示器：flex；
}
.我的按钮{
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

.myButton {
height: 40px; /* Whatever height you want */
}

.myButton img {
height: 25px;
width: 25px;
}

.myButton #imgbutton {
background-image: url('Image/Boutons/usine.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

<a href="#" class="myButton">
<img id="imgbutton"  src="Image/Boutons/usine.png">
</a>

.myButton a {
display: table-cell;
vertical-align: middle;
}

.myButton {
width: 60px; /* Whatever width you want */
}

.myButton {
height: 40px; /* Whatever height you want */
}

.myButton img {
height: 25px;
width: 25px;
}

<a href="#" class="myButton imageLink">Image Link</a>

.imageLink {
  background:url(http://www.placehold.it/50) center no-repeat, linear-gradient(to bottom, #f7be14 5%, #f0e1b7 100%);  
  text-indent: -9999px;
  height: 50px;
}