Issue
Aim : I have a yellow Top_Bar so I need to center Main_Webpage and Main_Contacts so these elements are placed right in the center of my Top_Bar
Notes : I tried vertical-align ; text-align – nothing happens. As you can see Main_Webpage and Main_Contacts are text (paragraphs) I need them right at the center of my Top_Bar
Code HTML :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title> OMLG_Store </title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="OMLG_Project.css">
</head>
<body>
<p class="Top_Bar"> </p>
<p class="Main_Webpage"> Главная </p>
<p class="Main_Contacts"> Контакты </p>
</body>
</html>
Code CSS :
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
.Top_Bar {
padding-bottom: 50px;
background-color: rgb(255, 185, 0);
border-style: solid;
border-color: black;
border-width: 3px;
}
.Main_Webpage {
width: 85px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 20px;
bottom: 155px;
left: 1300px;
cursor: pointer;
}
.Main_Contacts {
width: 85px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 20px;
bottom: 181px;
left: 1450px;
cursor: pointer;
}
Solution
First of all the top bar is really a nav element rather than a paragraph.
Put the two others into it as children.
Then you can use display flex to get them centered and with a gap between them.
I wouldn’t size the inner elements but let them take their natural size, that way things are more responsive.
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
.Top_Bar {
display: flex;
justify-content: center;
align-items: center;
gap: 2em;
padding: 2em;
background-color: rgb(255, 185, 0);
border-style: solid;
border-color: black;
border-width: 3px;
}
.Main_Webpage {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.Main_Contacts {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 20px;
cursor: pointer;
}<nav class="Top_Bar">
<p class="Main_Webpage"> Главная </p>
<p class="Main_Contacts"> Контакты </p>
</nav>Answered By – A Haworth
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0