垂直对齐 link
Align vertically in a link
h1, div {
font-family:"Sans-Serif";
color:#FFF;
}
h1{
text-align:center;
font-size:3em;
}
div {
text-align:justify;
position:50%;
font-size:1.5em;
}
.description {
text-decoration:none;
color:#AAA;
}
.description:hover {color:#888;}
.description:active {color:#555;}
nav {
text-align:center;
vertical-align:middle;
margin:50px 0px;
}
.nav {
display:inline-block;
text-decoration:none;
color:white;
font-family:"Sans-Serif";
font-size:1.5em;
font-weight:bold;
width:20%;
height:60px;
margin:35px 60px;
padding:10px;
text-align:center;
background-color:#05F;
border:2px dashed;
border-color:white;
border-radius:15px;
}
img {
width:50px;
height:50px;
margin:10px;
}
<body style="background-color:#000;">
<h1>Score Calculator</h1>
<br />
<div>
It works as <a class="description" href="https://hashcodejudge.withgoogle.com/" target="_blank">Google's Hash Code 2020 Judge System</a>: you can calculate your score without creating a whole submission or you can test your files befone sending it to <a class="description" href="https://codingcompetitions.withgoogle.com/hashcode" target="_blank">Google</a>.
</div>
<br />
<nav>
<a class="nav" href="http://www.mediafire.com/folder/pyhaewgizjimb"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Full folder</a>
<a class="nav" href="http://www.mediafire.com/file/em25u2rbxvbxuhx"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><ZIP archive</a><br />
<a class="nav" href="http://www.mediafire.com/file/tjftl0obi9jeo3r"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/r3bcd0ntuv8bwn6"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/drwp86tv26u1fs2"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/2ogmhjbkrry6mkp"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/9wkxoyz6nuetw4x"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator Source Code</a>
<a class="nav" href="http://www.mediafire.com/file/gm4ngpnq3vz9d19"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator Source Code</a><br />
</nav>
<body>
................................................ .....................
如何让 link 中的文本垂直居中对齐？ vertical-align 无效。
我也试着把它放在 中，但没有任何改变。
我是否必须编辑 link 或容器？
（对不起，如果这是一个愚蠢的问题，但我是 html/css 的初学者）
有多种方法可以实现这一点。检查下面的附件片段：..
- 只需在 img 标签中给出边距
5px 而不是 10px
h1, div {
font-family:"Sans-Serif";
color:#FFF;
}
h1{
text-align:center;
font-size:3em;
}
div {
text-align:justify;
position:50%;
font-size:1.5em;
}
.description {
text-decoration:none;
color:#AAA;
}
.description:hover {color:#888;}
.description:active {color:#555;}
nav {
text-align:center;
vertical-align:middle;
margin:50px 0px;
}
.nav {
display:inline-block;
text-decoration:none;
color:white;
font-family:"Sans-Serif";
font-size:1.5em;
font-weight:bold;
width:20%;
height:60px;
margin:35px 60px;
padding:10px;
text-align:center;
background-color:#05F;
border:2px dashed;
border-color:white;
border-radius:15px;
}
img {
width:50px;
height:50px;
margin:5px;
}
<body style="background-color:#000;">
<h1>Score Calculator</h1>
<br />
<div>
It works as <a class="description" href="https://hashcodejudge.withgoogle.com/" target="_blank">Google's Hash Code 2020 Judge System</a>: you can calculate your score without creating a whole submission or you can test your files befone sending it to <a class="description" href="https://codingcompetitions.withgoogle.com/hashcode" target="_blank">Google</a>.
</div>
<br />
<nav>
<a class="nav" href="http://www.mediafire.com/folder/pyhaewgizjimb"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Full folder</a>
<a class="nav" href="http://www.mediafire.com/file/em25u2rbxvbxuhx"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><ZIP archive</a><br />
<a class="nav" href="http://www.mediafire.com/file/tjftl0obi9jeo3r"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/r3bcd0ntuv8bwn6"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/drwp86tv26u1fs2"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/2ogmhjbkrry6mkp"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/9wkxoyz6nuetw4x"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator Source Code</a>
<a class="nav" href="http://www.mediafire.com/file/gm4ngpnq3vz9d19"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator Source Code</a><br />
</nav>
<body>
2。您可以通过 flex: 实现
h1, div {
font-family:"Sans-Serif";
color:#FFF;
}
h1{
text-align:center;
font-size:3em;
}
div {
text-align:justify;
position:50%;
font-size:1.5em;
}
.description {
text-decoration:none;
color:#AAA;
}
.description:hover {color:#888;}
.description:active {color:#555;}
nav {
text-align:center;
vertical-align:middle;
margin:50px 0px;
}
.nav {
display:flex;
float: left;
text-decoration:none;
color:white;
font-family:"Sans-Serif";
font-size:1.5em;
font-weight:bold;
width:20%;
height:60px;
margin:35px 60px;
padding:10px;
text-align:center;
background-color:#05F;
border:2px dashed;
border-color:white;
border-radius:15px;
align-items: center;
justify-content: center;
}
img {
width:50px;
height:50px;
}
<body style="background-color:#000;">
<h1>Score Calculator</h1>
<br />
<div>
It works as <a class="description" href="https://hashcodejudge.withgoogle.com/" target="_blank">Google's Hash Code 2020 Judge System</a>: you can calculate your score without creating a whole submission or you can test your files befone sending it to <a class="description" href="https://codingcompetitions.withgoogle.com/hashcode" target="_blank">Google</a>.
</div>
<br />
<nav>
<a class="nav" href="http://www.mediafire.com/folder/pyhaewgizjimb"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Full folder</a>
<a class="nav" href="http://www.mediafire.com/file/em25u2rbxvbxuhx"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><ZIP archive</a><br />
<a class="nav" href="http://www.mediafire.com/file/tjftl0obi9jeo3r"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/r3bcd0ntuv8bwn6"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/drwp86tv26u1fs2"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/2ogmhjbkrry6mkp"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/9wkxoyz6nuetw4x"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator Source Code</a>
<a class="nav" href="http://www.mediafire.com/file/gm4ngpnq3vz9d19"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator Source Code</a><br />
</nav>
<body>
h1, div {
font-family:"Sans-Serif";
color:#FFF;
}
h1{
text-align:center;
font-size:3em;
}
div {
text-align:justify;
position:50%;
font-size:1.5em;
}
.description {
text-decoration:none;
color:#AAA;
}
.description:hover {color:#888;}
.description:active {color:#555;}
nav {
text-align:center;
vertical-align:middle;
margin:50px 0px;
}
.nav {
display:inline-block;
text-decoration:none;
color:white;
font-family:"Sans-Serif";
font-size:1.5em;
font-weight:bold;
width:20%;
height:60px;
margin:35px 60px;
padding:10px;
text-align:center;
background-color:#05F;
border:2px dashed;
border-color:white;
border-radius:15px;
}
img {
width:50px;
height:50px;
margin:10px;
}
<body style="background-color:#000;">
<h1>Score Calculator</h1>
<br />
<div>
It works as <a class="description" href="https://hashcodejudge.withgoogle.com/" target="_blank">Google's Hash Code 2020 Judge System</a>: you can calculate your score without creating a whole submission or you can test your files befone sending it to <a class="description" href="https://codingcompetitions.withgoogle.com/hashcode" target="_blank">Google</a>.
</div>
<br />
<nav>
<a class="nav" href="http://www.mediafire.com/folder/pyhaewgizjimb"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Full folder</a>
<a class="nav" href="http://www.mediafire.com/file/em25u2rbxvbxuhx"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><ZIP archive</a><br />
<a class="nav" href="http://www.mediafire.com/file/tjftl0obi9jeo3r"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/r3bcd0ntuv8bwn6"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/drwp86tv26u1fs2"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/2ogmhjbkrry6mkp"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/9wkxoyz6nuetw4x"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator Source Code</a>
<a class="nav" href="http://www.mediafire.com/file/gm4ngpnq3vz9d19"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator Source Code</a><br />
</nav>
<body>
................................................ .....................
如何让 link 中的文本垂直居中对齐？ vertical-align 无效。
我也试着把它放在 中，但没有任何改变。 我是否必须编辑 link 或容器？
（对不起，如果这是一个愚蠢的问题，但我是 html/css 的初学者）
有多种方法可以实现这一点。检查下面的附件片段：..
- 只需在 img 标签中给出边距
5px而不是10px
h1, div {
font-family:"Sans-Serif";
color:#FFF;
}
h1{
text-align:center;
font-size:3em;
}
div {
text-align:justify;
position:50%;
font-size:1.5em;
}
.description {
text-decoration:none;
color:#AAA;
}
.description:hover {color:#888;}
.description:active {color:#555;}
nav {
text-align:center;
vertical-align:middle;
margin:50px 0px;
}
.nav {
display:inline-block;
text-decoration:none;
color:white;
font-family:"Sans-Serif";
font-size:1.5em;
font-weight:bold;
width:20%;
height:60px;
margin:35px 60px;
padding:10px;
text-align:center;
background-color:#05F;
border:2px dashed;
border-color:white;
border-radius:15px;
}
img {
width:50px;
height:50px;
margin:5px;
}
<body style="background-color:#000;">
<h1>Score Calculator</h1>
<br />
<div>
It works as <a class="description" href="https://hashcodejudge.withgoogle.com/" target="_blank">Google's Hash Code 2020 Judge System</a>: you can calculate your score without creating a whole submission or you can test your files befone sending it to <a class="description" href="https://codingcompetitions.withgoogle.com/hashcode" target="_blank">Google</a>.
</div>
<br />
<nav>
<a class="nav" href="http://www.mediafire.com/folder/pyhaewgizjimb"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Full folder</a>
<a class="nav" href="http://www.mediafire.com/file/em25u2rbxvbxuhx"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><ZIP archive</a><br />
<a class="nav" href="http://www.mediafire.com/file/tjftl0obi9jeo3r"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/r3bcd0ntuv8bwn6"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/drwp86tv26u1fs2"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/2ogmhjbkrry6mkp"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/9wkxoyz6nuetw4x"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator Source Code</a>
<a class="nav" href="http://www.mediafire.com/file/gm4ngpnq3vz9d19"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator Source Code</a><br />
</nav>
<body>
2。您可以通过 flex: 实现
h1, div {
font-family:"Sans-Serif";
color:#FFF;
}
h1{
text-align:center;
font-size:3em;
}
div {
text-align:justify;
position:50%;
font-size:1.5em;
}
.description {
text-decoration:none;
color:#AAA;
}
.description:hover {color:#888;}
.description:active {color:#555;}
nav {
text-align:center;
vertical-align:middle;
margin:50px 0px;
}
.nav {
display:flex;
float: left;
text-decoration:none;
color:white;
font-family:"Sans-Serif";
font-size:1.5em;
font-weight:bold;
width:20%;
height:60px;
margin:35px 60px;
padding:10px;
text-align:center;
background-color:#05F;
border:2px dashed;
border-color:white;
border-radius:15px;
align-items: center;
justify-content: center;
}
img {
width:50px;
height:50px;
}
<body style="background-color:#000;">
<h1>Score Calculator</h1>
<br />
<div>
It works as <a class="description" href="https://hashcodejudge.withgoogle.com/" target="_blank">Google's Hash Code 2020 Judge System</a>: you can calculate your score without creating a whole submission or you can test your files befone sending it to <a class="description" href="https://codingcompetitions.withgoogle.com/hashcode" target="_blank">Google</a>.
</div>
<br />
<nav>
<a class="nav" href="http://www.mediafire.com/folder/pyhaewgizjimb"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Full folder</a>
<a class="nav" href="http://www.mediafire.com/file/em25u2rbxvbxuhx"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><ZIP archive</a><br />
<a class="nav" href="http://www.mediafire.com/file/tjftl0obi9jeo3r"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/r3bcd0ntuv8bwn6"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/drwp86tv26u1fs2"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x86</a>
<a class="nav" href="http://www.mediafire.com/file/2ogmhjbkrry6mkp"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator x64</a><br />
<a class="nav" href="http://www.mediafire.com/file/9wkxoyz6nuetw4x"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><Submission Calculator Source Code</a>
<a class="nav" href="http://www.mediafire.com/file/gm4ngpnq3vz9d19"><img src="https://www.svgrepo.com/show/144384/zip.svg" /><File Calculator Source Code</a><br />
</nav>
<body>