Question

我将垂直对齐方式设置为以个人资料图像为中心。在我的一端，垂直对齐与轮廓图非常完美。问题是，下划线文本在Tom的左侧中断。如何将我的垂直对齐设置为中间，并且汤姆（Tom）单词的左侧文本不中断？

<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;
    }

Answer 1

我建议您为标签添加样式：

a{
 text-decoration: none;
 }

如果需要下划线：

.username {
height: 33px;
display: table-cell;
vertical-align: middle;
text-decoration: underline;   
}

在Jsfiddle中查看

Answer 2

这里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>

Answer 3

.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完全不显示该行。

Answer 4

请您试试这个

点击这里 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>

垂直对齐会中断文字下划线

4 个答案: