How do I only check 1 Div Block but not anything else

Question

Recently I started doing a OnePager Website; I'm having trouble with this div block here "Box-Middle" and "Text-Middle":

Click here for better imagination

I want "Elektro One and Elektroinstallationen, Produkte & Kommunikationstechnik" to be vertically aligned in the white box, but I cant figure it how?

And also I want the text "Elektro One and Elektroinstallationen, Produkte & Kommunikationstechnik" to not have opacity, because it would look better

And also I wanted to do the header list all center

#home {
  background-image: url(bilder/Hintergrund.jpg);
  background-position: center center;
  background-size: cover;
  box-shadow: 0 17px 53px rgba(0, 0, 0, 0.2);
}

#home h1,
h2 {
  margin-top: 25px;
}

#home h1 {
  margin-bottom: auto;
  color: #adadad;
}

#home h2 {
  color: #8a8a8a;
}

#Box-Middle {
  margin-top: 350px;
  width: 100%;
  height: 300px;
  background: white;
}

#home #Box-Middle {
  opacity: 50%;
}

<section id="home">
  <hr>
  <div id="Box-Middle">
    <div id="Text-Middle">
      <h1>Elektro One</h1>
      <h2>Elektroinstallationen, Produkte &amp; Kommunikationstechnik</h2>
    </div>
  </div>
</section>

Note that using ids for markup / styling is not recommended. Consider using [classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) if possible — volt, Feb 14 '20 at 18:35
@CarlEdwards no it's not. Using ids increases specificity and makes it more difficult to maintain the project. — volt, Feb 14 '20 at 18:40
@volt Yes, it is subjective, even though it's a good idea in most cases. — TylerH, Feb 14 '20 at 19:04

Mateus Mecunhe · Answer 1 · 2020-02-14T20:58:27.837

0

Add this to the div that contains what you want to center:

In this case: #Box-Middle

display: flex;
align-items: center;

As for the Header list, wrap it around a div and set its text-aling to center:

.header-list {text-align: center;}

edited Feb 14 '20 at 20:58

answered Feb 14 '20 at 18:42

Mateus Mecunhe

89
3

Hello! Thank you but I have a question what do you mean by wrap it around a div? – Johannes Mark Feb 14 '20 at 18:47
Hello! you didn't add the code of the header so I couldn't exemplify. What I mean is you add a div with class "header-list " (or any other name) around the code of your header. Add to the text-align class: text-align: center; – Mateus Mecunhe Feb 14 '20 at 20:48

How do I only check 1 Div Block but not anything else

1 Answers1