Struggling with vertically centering text in a fieldset, especially when a sibling element is hidden.
View the correct code example to see how it should look when the sibling element is visible:
#title {
margin: 20px;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
hr {
color: white;
background-color: white;
width: 80%;
height: 1px;
}
#formulaLine {
color: white;
background-color: white;
height: 1px;
}
section#formula {
width: auto;
max-width: 70%;
background: #393e46;
box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
border-radius: 5px;
margin: 5% auto;
padding: 10px;
font-size: 2vmax 1vmin;
}
<!-- Additional CSS code -->
<div>
<fieldset class="tBox">
<legend class="legend">Definition</legend>
<div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div>
<div>
<hr>
<section id="formula">
<div class="row">
<p class="column center" style="margin-top: 5%; margin-left: 3%;">Formula:</p>
<div class="column center">
<p>∑ # completed tasks in month 'A' (from month 'B' schedule)</p>
<hr id="formulaLine">
<p>∑ # tasks forecased to finish in month 'A'</p>
</div>
</div>
</section>
</div>
</fieldset>
</div>However, when the formula sibling (in React) is hidden, the definition text does not center as expected. It ends up looking like this:
The CSS for this case is the same as above. What could be causing this issue? despite trying various options such as Top, Float, the problem persists without a solution.