对齐IMG和文本跨度与CSS

我想通过使用跨度使其中的图像与按钮。下面的工作，但问题是文本垂直居中对齐，但保存按钮img is'nt。我需要将所有内容垂直排列在中间。我的代码有什么问题？对齐IMG和文本跨度与CSS

.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>

来源

2013-03-13 Mbrouwer88

？ ''button class =“ButtonSPAN”onclick =“Save（）”> 保存''会工作得很好。 – PlantTheIdea 2013-03-13 14:11:31

save.png尺寸？ – 2013-03-13 14:11:38

@LifeInTheGrey：不，不知道:) @ AndreaLigios：它的16 * 16像素 – Mbrouwer88 2013-03-13 14:14:33

[更新]裹在span你的 “保存”，并添加到您的CSS

.ButtonSPAN{ 
    line-height:25px; 
} 

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

演示here

来源

2013-03-13 14:12:02 Bigood

通过这样做，没有什么是在中间了，它全部坚持顶部 – Mbrouwer88 2013-03-13 14:13:47

@ Mbrouwer88查看更新的答案 – Bigood 2013-03-13 14:15:42

这几乎工作。该文本比文本顶部多出2个像素。如何纠正？ – Mbrouwer88 2013-03-13 14:24:02

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

希望这会有所帮助！

来源

2013-03-13 14:17:33

有几个选择这里：

您可以将图像作为背景图片到你的跨度：

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

你必须把你的onClick="save()"您span元素。

Background-image property

OR，只要你知道图像的高度，这应该工作：

（我假设16像素的图像高度）

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

，或者，看看在此page

PS以小写字母开始您的班级名称是一种很好的做法。

来源

2013-03-13 14:17:51 Bill

他正在使用的图像是16x16像素。它不会被用作背景图像。 – Zack 2013-03-13 14:18:19

为什么不呢？这对我来说似乎是最好的选择。 – Bill 2013-03-13 14:19:43

当您把文本和单一span元素的图像，则需要解决如在下面的小提琴：

Working Fiddle

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

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

我也是从.ButtonSPAN类中删除vertical-align并添加line-height等于身高的值来代替。

来源

2013-03-13 14:43:52

检出this fiddle，说明可用于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截图。我做了形象稍大并给予span一个background-color更好地说明变种：

vertical-align examples

你知道你可以把图像按钮太

来源

2013-03-13 14:45:01 CherryFlavourPez

对齐IMG和文本跨度与CSS

回答

相关问题