【问题标题】:Align vertically in a link在链接中垂直对齐
【发布时间】:2020-02-24 14:01:40
【问题描述】:

    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>

.................................................. ....................

如何将链接中的文本垂直居中对齐? vertical-align 不起作用。

我也尝试将它放在 中,但没有任何改变。 我必须编辑链接或容器吗?

(对不起,如果这是一个愚蠢的问题,但我是 html/css 的初学者)

【问题讨论】:

  • 尝试使用等于元素的heightline-height,这通常有效...并确保font-sizeline-height 适合height 和@987654329 @也是。
  • 你能提供一张结果图片来展示你想要什么吗?

标签: html hyperlink alignment vertical-alignment


【解决方案1】:

有多种方法可以实现这一目标。检查下面的附加sn-p:..

  1. 只需在 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>

【讨论】:

  • 谢谢,它并不完美(链接已对齐为 3 列),但它对实现我的目标有很大帮助
猜你喜欢
  • 1970-01-01
  • 2014-03-03
  • 2011-09-15
  • 1970-01-01
  • 1970-01-01
  • 2017-12-26
  • 2012-04-01
  • 1970-01-01
  • 2016-04-26
相关资源
最近更新 更多