Тег вертикальной привязки по центру в встроенном блоке

Привет, мне нужно центрировать тег привязки по вертикали, и я использую выравнивание по вертикали: среднее; но это не работает для меня. Может кто-нибудь сказать мне, что я могу сделать. Я использую встроенный блок для отображения, и справочник MDN показывает, что вертикальное выравнивание работает для элементов встроенного блока, но не для меня. Я даю код, может кто поможет

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,[email protected],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>
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
26
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно использовать свойство flex для выравнивания по центру тега привязки.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,[email protected],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>

Вы можете использовать flexbox или макет сетки для родителя элемента, который вам нужно центрировать по вертикали.

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

или

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

Другие вопросы по теме