css - 在表格列中居中链接 block

标签 css html

这有点难以解释。我需要在 Block 链接中垂直对齐文本。这是我的 HTML。

HTML

<html>
    <head>
        <link rel="stylesheet" href="Style1.css" />
        <title>Jordan's Web Page</title>
    </head>
    <body>
        <div class="nav-Outer">
            <div class="nav-Inner">
                <table class="nav-Tab noPaddingMargin">
                    <tr class="noPaddingMargin">
                        <td>
                            <div class="nav-header"><div class="arrow-down"></div></div>
                            <a class="nav-link" href="#">Home</a>
                        </td>
                        <td><img class="navLogo" src="http://placehold.it/125x125" /></td>
                         <td><a href="#"><!--Text in here needs to be aligned.-->Home</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        $(".nav-link").each(function() {
            $(this).hover(function(){

            },function(){

            })
        })
    </script>
</html>

CSS

.nav-Outer {
    width: 100%;
    height: 125px;
    bacvkground-color: blue;
    border-bottom: 1px solid rgb(228, 228, 228);
}
.nav-Inner {
    width: 75%;
    height: 100%;
    margin: 0px auto;
    text-align: center;
}

.nav-header{
    width: 100%;
    height: 5px;
    background-color: #5E5E5E;
    text-align: center;
    position: absolute;
    display: none;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    margin: 0px auto;
    border-top: 10px solid #5E5E5E;
}

.active {
    display: block;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.navLogo{
    margin-top: -1px;
}

.nav-Tab{
    padding:0px;
    margin:0px;
    height: 100%;
    width: 100%;
     border-spacing: 0px;
}
.nav-Tab tr td{
    position: relative;
    text-align: center
}

.nav-Tab tr td a{
    display: block;
    text-decoration: none;
    font-size: 16px;
    color: rgb(80, 80, 80);
    font-weight: bold;
    width: 100%;
    height: 100%;
}

这是一张图片:

Example ,

有任何问题请在下方留言。

最佳答案

尝试这样做:

提供行高:line-height: 125px;.nav-Tab tr td a{

.nav-Tab tr td a{
    display: block;
    text-decoration: none;
    font-size: 16px;
    color: rgb(80, 80, 80);
    font-weight: bold;
    width: 100%;
    line-height: 125px;
}

希望这对您有所帮助!

关于css - 在表格列中居中链接 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19279988/

相关文章:

html - 如何将父元素的宽度折叠为子元素的总宽度

javascript - 带有子菜单的可折叠类似 Mac 的侧边栏导航

javascript - 如何始终在顶部显示html表格

javascript - 如何使用 JQuery 检测 • 符号并将它们转换为 HTML ul

javascript - 强化 : DOM based cross site scripting

javascript - 选中复选框时如何隐藏div - JQuery

css - 让文本通过一个 div

android - 如何使 CSS flex 属性与旧浏览器兼容?

css - 防止在 </div> 之后换行

php - 如何从数据库中获取菜单及其子类别