0

我正在尝试使用跨度制作一个带有图像的按钮。以下工作，但问题是文本垂直居中对齐，但保存按钮 img 不是。我需要所有内容在中间垂直对齐。我的代码有什么问题？

.ButtonSPAN{
display:inline-block;
color: white;
background-color:#00537B;
border: 1px solid #1E90FF;
height: 25px;

padding:3px;
vertical-align:middle;
font-weight: bold;
}
.ButtonSPAN:hover{
color: #F0E68C;
cursor: hand; cursor: pointer;  
}

<span class="ButtonSPAN"><img src="/common/images/save.png" onclick="Save()">&nbsp;Save</span>
4

5 回答 5

2

看看这个小提琴，说明可用的不同值vertical-align。您的示例 CSS 显示您应用inline-block到父级（.ButtonSPAN），这无助于对齐其中的内容。

实现您所追求的最简单的方法是将文本包装在一个单独的文件中span，然后使用它：

<button><img src="http://placehold.it/36x36"> <span>Middle</span></button>

button {
    color: white;
    background-color:#00537B;
    border: 1px solid #1E90FF;
    padding: 3px;
    font-weight: bold;
}

img, span {
    display: inline-block;
    vertical-align: middle;
}

这是上面 jsFiddle 的截图。我将图像稍微放大了一点，并给出了spanabackground-color以更好地说明变体：

垂直对齐示例

于 2013-03-13T14:45:01.457 回答
0

[更新]将您的“保存”包装在一个 中span，并添加到您的 css

.ButtonSPAN{
    line-height:25px;
}

.ButtonSPAN *{
    vertical-align:middle; //Align everything nested in .ButtonSPAN to the middle
}

演示在这里

于 2013-03-13T14:12:02.337 回答
0

有些想法可能会奏效。我的第一个选择是将图像设置为background:url(image_path)跨度并给出高度、宽度和边距以正确对齐。您可以放置​​多个背景，只需在您希望点击的位置添加一个锚点，或者使您的所有跨度都可点击。第二种选择是将该图像与vertical-align:middle. 第三是编辑该图像以在图像上方留出透明空间。

希望这会有所帮助！

于 2013-03-13T14:17:33.400 回答
0

这里有几个选项：

您可以将图像作为背景图像应用到您的跨度：

.ButtonSPAN{
    background:#00537B url(/common/images/save.png) 3px center no-repeat;
}

你将不得不把你onClick="save()"的span元素。

背景图像属性

或者，如果您知道图像的高度，这应该可以：

（我假设图像高度为 16px）

.ButtonSPAN{
    position:relative;
}
.ButtonSPAN img{
    position:absolute;
    top:50%;
    margin-top:-8px;
}

或者，或者，看看这个页面

PS 最好以小写字母开头类名。

于 2013-03-13T14:17:51.183 回答
0

由于您将文本和图像都保存在一个span元素中，因此您需要按照以下小提琴中所示的方法解决：

工作小提琴

在这里，我添加marign-bottom:-3px了使它看起来像在文本中间。

.ButtonSPAN img{  
   margin-bottom:-3px;  /* fix until the img comes to mid */
   width:16px;height:16px; /* giving fixed widths for demo */
}

我也vertical-align从.ButtonSPAN班级中删除并添加了line-height等于高度的值。

于 2013-03-13T14:43:52.887 回答