时间戳

首页 > 解决方案 > 垂直对齐打破文本下划线

html - 垂直对齐打破文本下划线

问题描述

我将垂直对齐设置为以我的个人资料图像为中心。就我而言，垂直对齐与个人资料图像完美。问题是下划线文本在 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;
    }

标签： htmlcss

解决方案

你能试试这个吗

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

推荐阅读