-1

I've got an image and a text/border that would like to position in the center of the image. However, even though I am using text-align and I've tried to use vertical-align, the text/border is at the top-left of the background image and not in the center.

This is the code I have so far

.banner-background {
  background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--eXgVdE2K--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/i/ux6uf870i7esod0sx4sw.png');
  background-size: cover;
  height: 40%;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-background .background-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  margin: 0;
  border: solid #f1f1f1;
  border-radius: 10%;
  text-align: center;
  font-size: 200%;
  color: #f1f1f1;
  font-family: myFont1;
  font-weight: bold;
  width: 25%;
}
<div class="banner-background">
  <div class="background-text">
    <h2>Hello, world!<br>I am a developer!</h2>
  </div>
</div>

So far, it is displaying like this: Display image

Joao Soares
  • 71
  • 7

1 Answers1

1

using flexbox:

.banner-background {
    display: flex;
    align-items: center;
    justify-content: center;
}
andi2.2
  • 86
  • 1
  • 11
  • Adding to the answer, [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is an awesome guide on how to use flexbox. You may also take a look at [grids](https://www.w3schools.com/css/css_grid.asp) if you're willing to create a website responsive for all devices. – Gunther Mar 09 '21 at 16:41
  • If you are new to flexboxes, you also can try this [game](https://flexboxfroggy.com/) – andi2.2 Mar 09 '21 at 16:42