Can you centre a text that isn't inside of a block within that block? CSS

Question

I recently started learning creating a website using html and css. For my website I wanted to create a textblock which was transparent enough to see the image behind, however I didn't want the text ontop of it to transparent aswell. As far as I can tell the only way this is possible is for the text to not actually be in the box but rather on top of it. Therefore I added the text on top, but the problem is, I can't really center the text because there isn't anything to align it to. The only solutions I can think of is that maybe there actually is another way to make the text not translucent while the box remains so or to create invisible borders on the side of the text to make it align to but since I'm a beginner I don't really know how to. Is there a way?

* {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.central {
  position: relative;
  height: 1080px;
  width: 100%;
  z-index: 0;
}

.image {
  position: absolute;
  z-index: 0;
}

.slide {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 400px;
  display: block;
  top: 0px;
  left: 0px;
  opacity: 50%;
  background-color: #6B3F3F;
}

.slidetext h3 {
  top: 10px;
  left: 0px;
  right: 1520px;
  position: absolute;
  z-index: 1;
  color: white;
  padding-left: 200px;
  padding-right: 800px;
}

<div class="main">
  <div class="central">
    <img class="image" src="https://via.placeholder.com/150" alt="Supposed background. Error.">
    <div class="slide">
    </div>
    <div class="slidetext">
      <h3>Title</h3>
    </div>
  </div>
</div>

Please make a minimal reproducible example (share your image as a url) https://stackoverflow.com/help/minimal-reproducible-example — kabooya, Jul 24 '20 at 09:45

score 2 · Accepted Answer · edited Jul 24 '20 at 09:49

Use rgba instead of opacity; this way the text can still be on top of it without being affected.

background-color: rgba(107,63,63, 0.5)

Here I've put the title back inside the .slide div to illustrate.

* {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.central {
  position: relative;
  height: 1080px;
  width: 100%;
  z-index: 0;
}

.image {
  position: absolute;
  z-index: 0;
}

.slide {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 400px;
  display: block;
  top: 0px;
  left: 0px;
  background-color: rgba(107, 63, 63, 0.5)
}

.slidetext h3 {
  color: white;
  text-align: center;
  margin-top: 10px;
}

<div class="main">
  <div class="central">
    <img class="image" src="programming.png" alt="Supposed background. Error.">
    <div class="slide">
      <div class="slidetext">
        <h3>Title</h3>
      </div>
    </div>
  </div>
</div>

score -1 · Answer 2 · answered Jul 24 '20 at 09:41

-1

Add

display: flex;
justify-content: center;
align-items: center;

To items you want to center horizontally and vertically.

answered Jul 24 '20 at 09:41

kabooya

447
3
14

Can you centre a text that isn't inside of a block within that block? CSS

2 Answers2