CODEWITHSUNDEEP
htmlcssfrontendcenter
user92837
user92837

Reputation: 29

css - How to center multiple divs without overlapping?

I want to enter a title, a line and a subtitle in the center of an image (horizontally and vertically), in this order from top to bottom, with the line between the two texts, but they keep overlapping. I've tried some answers from other questions, such as changing from div to span and setting display:block in the outter div and display:inline-block in the inner divs, for example, but nothing works.

With flexbox, I ran into the issue of needing to name all of their classes the same for it to work, which is not viable because they have different properties.

Appreciate the help!

Here's the code and the fiddle:

https://jsfiddle.net/u8asjmy7/

HTML

<div class="banner"> 
        <div class="titulo-banner"><b>BIG TITLE</b></div>
        <div class="linha-banner"></div>
        <div class="texto-banner"><b>Small<br>subtitle.</b></div>
    </div>

CSS

body, html {
    height: 100%;
    margin: 0;
  }
  
.banner {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.1), rgba(20, 20, 20, 0.90)), url('../images/cp/brian-lundquist.png');
    object-fit: cover;
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: relative;
    text-align: center;
    color: white;
}

.titulo-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Martel;
  font-size: calc(15px + 2vw);
}

.linha-banner {
  height: 4px;
  width: 15vw;
  background: #ffc700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.texto-banner {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: Martel;
   font-size: calc(15px + 0.5vw);
}

Upvotes: 0

Views: 102

Answers (1)

Damzaky
Damzaky

Reputation: 10826

Hmm, I think you could still use flexbox without having to name all the existing classes, does this accomplish what you need?

body,
html {
  height: 100%;
  margin: 0;
}

.banner {
  background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.1), rgba(20, 20, 20, 0.90)), url('../images/cp/brian-lundquist.png');
  object-fit: cover;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.titulo-banner {
  font-family: Martel;
  font-size: calc(15px + 2vw);
}

.linha-banner {
  height: 4px;
  width: 15vw;
  background: #ffc700;
}

.texto-banner {
  font-family: Martel;
  font-size: calc(15px + 0.5vw);
}
<div class="banner">
  <div class="titulo-banner"><b>BIG TITLE</b></div>
  <div class="linha-banner"></div>
  <div class="texto-banner"><b>Small<br>subtitle.</b></div>
</div>

If you must use position: absolute, you should do it only on the container of those texts. Let me know if you need a better solution

Upvotes: 2

Related Questions