这有点难以解释。我需要在块链接中垂直对齐文本。这是我的 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%;
}
这是一张图片：
,
有什么问题可以在下方留言。