Question

我正在使用ActionLink来打印图标和超链接文本...这工作正常，但我的文字出现在图标上......

@Html.ActionLink("New FreeZone", "CreateNewFreeZone", "Qualification", null, new { @class = "CreateNewEntry_Icon" })

CSS

 .CreateNewEntry_Icon{ 
 height:24px;
 display:inline-block;
 background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top left;
 }

Answer 1

在CSS中添加line-height

.CreateNewEntry_Icon{ 
 line-height:5; //Adjust Accordingly
 display:inline-block;
 background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top left;
 }

检查fiddle

Answer 2

我建议你有两个单独的项目，总是很难按你的意愿安排图标，所以通过保持它分开它可以解决你的问题，并让你自由地定位你选择的图像和文字。你可以为这些元素编写你的剃刀风格

<div>
   <img style="width:30px;height:60px;vertical-align:middle">
   <span style="">Works.</span>
</div

打印ActionLink ASP.NET剃刀代码的图标和文本

CSS

2 个答案: