Question

I can't move the text decoration from the "download text".

Incidentally - I'd also like to be able to center it against the image but can't work out how to do that either... Code below :)

img {
  vertical-align: text-middle;
  float: left;
}

p {
  font-size: 220%;
  font-family: Arial, Verdana, sans-serif;
  text-decoration: none;
}

<a download="GLV-11.pdf" href="https://drive.google.com/uc?
     export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
  <p class="brochure"> Brochure Download <img src="https://drive.google.com/uc?
    export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"> </p>
</a>

Answer 1

您需要定位a元素本身：

a {
     text-decoration: none;
}

Answer 2

在包含a（锚）标记上声明a { text-decoration: none; }属性，例如：

img {
  vertical-align: text-middle;
  float: left;
}

p {
  font-size: 220%;
  font-family: Arial, Verdana, sans-serif;
  line-height: 73px; /* equal to height of img element */
}

a {
  text-decoration: none;
}

代码段示范：

＆＃13;

<a download="GLV-11.pdf" href="https://drive.google.com/uc?
 export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">

  <p class="brochure"> Brochure Download <img src="https://drive.google.com/uc?
export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"> </p>

</a>

＆＃13;

/**
 * Auth middleware
 */
export const authMiddleware: Middleware = <State>({ getState, dispatch }) => next => action => {

  if (isType(action, actions.authExpired)) {

    refreshToken()
      .then(token => {
        setSession(token, true);
      })
      .catch(e => console.log('Silent auth error', e));

  }

  return next(action);

}

＆＃13;

Answer 3

需要为a标记本身定义文本修饰。将不同的设置应用于不同的状态（链接/悬停等）也很常见，如下所示。

关于垂直居中对齐，您可以使用display: inline-block和vertical-align: middle，如下所示。（注意：我将文本移动到代码中的图像之后）

img {
  display: inline-block;
  vertical-align: middle;
}

p {
  display: inline-block;
  vertical-align: middle;
  font-size: 220%;
  font-family: Arial, Verdana, sans-serif;
}

a:link, a:visited {
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

<a download="GLV-11.pdf" href="https://drive.google.com/uc?
     export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
  <p class="brochure"><img src="https://drive.google.com/uc?
    export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download">  Brochure Download </p>
</a>

Answer 4

对于锚标记，我们删除了text-decoration css属性。

详细了解此属性here

同样为了居中，带有图片的标签，你可以指定带有类名的'a'标签，比如'brochure-download - container' 您可以像这样修改您的HTML：

<a class="brochure-download--container" download="GLV-11.pdf" href="https://drive.google.com/uc?export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm"><p class="brochure"><img src="https://drive.google.com/uc?export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"><span>Brochure Download</span></p>
</a>

然后，您可以添加此CSS以对齐居中并从锚标记中删除文本修饰。

a.brochure-download--container p{
  display:flex;
  align-items:center;/*bring content to center*/
}

顺便说一下，所有浏览器都不支持flex属性，可能需要供应商前缀..你可以检查它here

我会告诉你发现供应商前缀（谷歌在开始学习新东西时真的很有帮助）

无法从<a> element

4 个答案: