How to center paragraph inside another paragraph

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"> &nbsp; </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

Leave a Reply

(*) Required, Your email will not be published