Привет, мне нужно центрировать тег привязки по вертикали, и я использую выравнивание по вертикали: среднее; но это не работает для меня. Может кто-нибудь сказать мне, что я могу сделать. Я использую встроенный блок для отображения, и справочник 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>
Вам нужно использовать свойство 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;
}