CODEWITHSUNDEEP
htmlcss
M.Mac
M.Mac

Reputation: 739

How to match text the positions of a text in different elements?

Inside a <header> i created two <div> elements, with one elements containing a <h1> with a text and the other <div> element containing an <nav> element with a list.

I would like to bring the nav elements on the same level as the text inside the <h1> element.

In the following picture you see the header and the red linke marks the different levels:

texts not on the same level

Is there a good approach without playing around with the padding`?

Code:

body {
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 20px;
  padding: 0px;
  margin: 0px;
  background-color: lightslategrey;
}

.gold {
  color: gold;
}

.headerWrapper {
  display: flex;
  background-color: darkgrey;
  min-height: 20px;
  max-height: 100px;
}

.headerWrapper div#flex1 {
  flex: 0 0 70%;
  min-height: inherit;
  max-height: inherit;
}

.headerWrapper div#flex2 {
  flex: 1;
  background-color: blue;
  min-height: inherit;
  max-height: inherit;
}

.headerWrapper nav {
  background-color: lightblue;
}

.headerWrapper ul {}

.headerWrapper li {
  display: inline;
  list-style: none;
}

.headerWrapper a#li1,
a#li2,
a#li3 {
  text-decoration: none;
  text-transform: uppercase;
  color: gold;
  background-color: slategray;
  font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Efficient construction with 20years knowledge in that field.">
  <meta name="keywords" content="construction, building, contraction, contractor, builder, construction companies, remodeling,">
  <meta name="author" content="greentee">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
  <title>FinalConstructions | Watch the Final Construction</title>
</head>

<body>
  <header class="headerWrapper">
    <div id="flex1">
      <h1 id="title"><span class="gold">Final</span>Constructions | Withstand the Finals </h1>
    </div>
    <div id="flex2">
      <nav class="topNav">
        <ul>
          <li><a id="li1" href="../code/index.html">Home</a></li>
          <li><a id="li2" href="../code/services.html">Services</a></li>
          <li><a id="li3" href="../code/about.html">About</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

</html>

Upvotes: 0

Views: 129

Answers (2)

jual ahmed
jual ahmed

Reputation: 448

there have so many way to make a item vertical align center . here is my way how i did enter image description here 

 .headerWrapper div#flex2 {
     width:30%;
     background-color: blue;
     min-height: inherit;
     max-height: inherit;
     position:relative;
}
 .headerWrapper nav{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
}

body {
     font-family: "Times New Roman", Times, serif;
     font-style: normal;
     font-size: 20px;
     padding: 0px;
     margin: 0px;
     background-color: lightslategrey;
}
 .gold {
     color: gold;
}
 .headerWrapper {
     display: flex;
     background-color: darkgrey;
     min-height: 20px;
     max-height: 100px;
}
 .headerWrapper div#flex1 {
     width:70%;
     min-height: inherit;
     max-height: inherit;
}
 .headerWrapper div#flex2 {
     width:30%;
     background-color: blue;
     min-height: inherit;
     max-height: inherit;
     position:relative;
}
 .headerWrapper nav{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
}
 .headerWrapper nav {
     background-color: lightblue;
}
 .headerWrapper ul {
}
 .headerWrapper li {
     display: inline;
     list-style: none;
}
 .headerWrapper a#li1, a#li2, a#li3 {
     text-decoration: none;
     text-transform: uppercase;
     color: gold;
     background-color: slategray;
     font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Efficient construction with 20years knowledge in that field.">
  <meta name="keywords" content="construction, building, contraction, contractor, builder, construction companies, remodeling,">
  <meta name="author" content="greentee">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
  <title>FinalConstructions | Watch the Final Construction</title>
</head>

<body>
  <header class="headerWrapper">
    <div id="flex1">
      <h1 id="title"><span class="gold">Final</span>
      Constructions | Withstand the Finals </h1>
    </div>
    <div id="flex2">
      <nav class="topNav">
        <ul>
          <li><a id="li1" href="../code/index.html">Home</a></li>
          <li><a id="li2" href="../code/services.html">Services</a></li>
          <li><a id="li3" href="../code/about.html">About</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>
</html>

Upvotes: 0

m4n0
m4n0

Reputation: 32295

You can make use of the align-items: center but first you need to set flex or grid to the container. I would suggest you to use a framework like Bulma for your needs. It is just one of many: Awesome CSS Frameworks

Added CSS:

.headerWrapper div#flex2 {
  display: grid;
  align-items: center;
}

Output:

enter image description here

body {
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 20px;
  padding: 0px;
  margin: 0px;
  background-color: lightslategrey;
}

.gold {
  color: gold;
}

.headerWrapper {
  display: flex;
  background-color: darkgrey;
  min-height: 20px;
  max-height: 100px;
}

.headerWrapper div#flex1 {
  flex: 0 0 70%;
  min-height: inherit;
  max-height: inherit;
}

.headerWrapper div#flex2 {
  flex: 1;
  background-color: blue;
  min-height: inherit;
  max-height: inherit;
  display: grid;
  align-items: center;
}

.headerWrapper nav {
  background-color: lightblue;
}

.headerWrapper ul {}

.headerWrapper li {
  display: inline;
  list-style: none;
}

.headerWrapper a#li1,
a#li2,
a#li3 {
  text-decoration: none;
  text-transform: uppercase;
  color: gold;
  background-color: slategray;
  font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Efficient construction with 20years knowledge in that field.">
  <meta name="keywords" content="construction, building, contraction, contractor, builder, construction companies, remodeling,">
  <meta name="author" content="greentee">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
  <title>FinalConstructions | Watch the Final Construction</title>
</head>

<body>
  <header class="headerWrapper">
    <div id="flex1">
      <h1 id="title"><span class="gold">Final</span>Constructions | Withstand the Finals </h1>
    </div>
    <div id="flex2">
      <nav class="topNav">
        <ul>
          <li><a id="li1" href="../code/index.html">Home</a></li>
          <li><a id="li2" href="../code/services.html">Services</a></li>
          <li><a id="li3" href="../code/about.html">About</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

</html>

Upvotes: 1

Related Questions