内联块中的垂直居中锚标记

Question

您好，我需要将锚标记垂直居中，我正在使用 vertical-align: middle;但它对我不起作用。谁能告诉我我能做什么。我正在使用 inline-block 进行显示，MDN Reference 显示垂直对齐适用于 inline-block 元素，但它不适用于我。我正在给出代码，看看是否有人可以提供帮助

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,300&family=Roboto+Mono&family=Roboto:wght@100;400&display=swap');

*{
    background-color: rgb(26, 26, 26);
    margin: 0;
    padding: 0;
}
a{
    display: inline-block;
    border: 1px solid rgb(255, 90, 90);
    color: rgb(255, 124, 124);
    background-color: rgb(255, 85, 85, 0.5);
    text-decoration: none;
    border-radius: 5px;
    padding: 1.5px 12px;
    text-transform: capitalize;
    font-family: 'Roboto Flex', Sans-Serif;
    font-size: xx-large;
    vertical-align: middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
    <link rel="stylesheet" href="button.css">
</head>
<body>
   
    <center><a href="#" target="_blank"">Export</a>
</body>
</html>

Answer 1

您需要使用 flex 属性来居中对齐锚标记。

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,300&family=Roboto+Mono&family=Roboto:wght@100;400&display=swap');

*{
    background-color: rgb(26, 26, 26);
    margin: 0;
    padding: 0;
}
body{
      display: flex;
      justify-content: center;
      align-items: center;
      height:100vh;
 }
a{
     display: flex;
     justify-content: center;
     align-items: center;
     width:200px;
    border: 1px solid rgb(255, 90, 90);
    color: rgb(255, 124, 124);
    background-color: rgb(255, 85, 85, 0.5);
    text-decoration: none;
    border-radius: 5px;
    padding: 1.5px 12px;
    text-transform: capitalize;
    font-family: 'Roboto Flex', Sans-Serif;
    font-size: xx-large;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
    <link rel="stylesheet" href="button.css">
</head>
<body>
   
    <center><a href="#" target="_blank"">Export</a>
</body>
</html>

Answer 2

您可以在需要垂直居中的元素的父元素上使用 flexbox 或网格布局。

parent{
   display: grid;
   place-items: center;
}

或

parent{
   display: flex;
   flex-direction: column;
   justify-content: center;
}

内联块中的垂直居中锚标记

Center Vertically Anchor Tag in inline-block

css

anchor

center

vertical-alignment