-1

Could someone explain what the problem is in the code? No matter what I do, even taking out all the styles I can't align in the middle.

.Div1 {
     vertical-align: middle;
     height: 100%;
     width:100%;
     position: relative;
     min-height: 100px;
     background: linear-gradient(180deg, rgba(0,113,142,1) 0%, rgba(119,111,111,0.8855917366946778) 80%);
}
.Div2 {
      position: absolute;
      top:75px;
      bottom: 0;
      text-align: center;
      font-size: 12px;
    }
<div class="Div1">
  <p>I-BS</p>
  <div class="Div2">
      <p>
          <font size="auto">              <strong>CRONOGRAMA&nbspCLUSTER;&nbsp;&nbs;&nbsp;&nbsp;EMBARCAÇÃO&;&nbsp;&nbsp;&nbsp&nbsp;;SAÍDA </strong>
          </font>
      </p>
  </div>
</div>
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
AllPower
  • 175
  • 1
  • 4
  • 16
  • 1
    what do you think is `vertical-align: middle` doing? It is not aligning a text in the vertical center of an element. It is aligning the text in the vertical center of the line-height! – tacoshy Jul 11 '22 at 18:22
  • Please be more specific about what you want aligned where? Are you married to that markup? It's been a long time since I saw – senecaTheMeek Jul 11 '22 at 18:28

1 Answers1

0

I would recommend using flex instead by replacing

         vertical-align: middle;

with

         display: flex;
         align-items: center;


.Div1 {
     display: flex;
     align-items: center;
     height: 100%;
     width:100%;
     position: relative;
     min-height: 100px;
     background: linear-gradient(180deg, rgba(0,113,142,1) 0%, rgba(119,111,111,0.8855917366946778) 80%);
}
.Div2 {
      position: absolute;
      top:75px;
      bottom: 0;
      text-align: center;
      font-size: 12px;
    }
<div class="Div1">
  <p>I-BS</p>
  <div class="Div2">
      <p>
          <font size="auto">              <strong>CRONOGRAMA&nbspCLUSTER;&nbsp;&nbs;&nbsp;&nbsp;EMBARCAÇÃO&;&nbsp;&nbsp;&nbsp&nbsp;;SAÍDA </strong>
          </font>
      </p>
  </div>
</div>
sm3sher
  • 2,764
  • 1
  • 11
  • 23