我将垂直对齐方式设置为以个人资料图像为中心。在我的一端,垂直对齐与轮廓图非常完美。问题是,下划线文本在Tom的左侧中断。如何将我的垂直对齐设置为中间,并且汤姆(Tom)单词的左侧文本不中断?
http://jsfiddle.net/5zrxd9c1/1/
<a href="/user/tomjones" class="image" title="View profile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Macaca_sinica_-_01.jpg/220px-Macaca_sinica_-_01.jpgn" class="gravatar" width="28" height="28" style="border-radius: 50px; padding:2px;border: 2px solid #fff;" alt="">
<span style="height: 33px;display: table-cell;vertical-align: middle;/* ext-underline-position: inherit; *//* margin-top: -5px; */" class="username">
Tom Jones
</span>
</a>
CSS:
.username {
height: 33px;
display: table-cell;
vertical-align: middle;
}
body {
background-color:powderblue;
}
答案 0 :(得分:0)
我建议您为标签添加样式:
a{
text-decoration: none;
}
如果需要下划线:
.username {
height: 33px;
display: table-cell;
vertical-align: middle;
text-decoration: underline;
}
在Jsfiddle中查看
答案 1 :(得分:0)
这里http://jsfiddle.net/5zrxd9c1/4/ 完全按照您想要的方式查看答案
a{
white-space:nowrap;
}
.username {
display: table-cell;
width:1%;
}
body {
background-color:powderblue;
}
<a href="/user/tomjones" class="image" title="View profile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Macaca_sinica_-_01.jpg/220px-Macaca_sinica_-_01.jpgn" class="gravatar" width="28" height="28" style="border-radius: 50px; padding:2px;border: 2px solid #fff;" alt=""><span class="username">Tom Jones</span>
</a>
答案 2 :(得分:0)
.username {
height: 100px;
display: table-cell;
vertical-align: middle;
}
body {
background-color:powderblue;
}
<a href="/user/tomjones" class="username" title="View profile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Macaca_sinica_-_01.jpg/220px-Macaca_sinica_-_01.jpgn" class="gravatar" width="28" height="28" style="border-radius: 50px; padding:2px;border: 2px solid #fff;" alt="">
<span >Tom Jones</span>
</a>
尝试此代码,进行少量更改即可,但是由于某些原因在此编辑器中无法正确显示。另一方面,您可以在标签上使用text-underline:none完全不显示该行。
答案 3 :(得分:0)
请您试试这个
点击这里 https://jsfiddle.net/kblau237/sdc28tg7/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tut124</title>
<style type="text/css">
.username {
height: 33px;
/*!!! removed this*/
/*display: table-cell;*/
/*vertical-align: middle;*/
/*!!!added these*/
position: absolute;
left: 50px;
top: 18px;
}
body {
background-color: powderblue;
}
</style>
</head>
<body>
<a href="/user/tomjones" class="image" title="View profile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Macaca_sinica_-_01.jpg/220px-Macaca_sinica_-_01.jpgn"
class="gravatar" width="28" height="28" style="border-radius: 50px; padding:2px;border: 2px solid #fff;"
alt="">
@*!!!Changed the display to table-row removed vertical-align: middle;*@
<span style="height: 33px;display: table-row;text-decoration:underline" class="username">Tom Jones</span>
</a>
</body>
</html>