I have a button <input type="submit">
inside a form and a div
. The div
has a specified width and also a padding. I want the button to be fully centered in the div but I can't.
here the code
.dVolver {
text-align: center;
background-color: lightblue;
padding: 0.5em;
width: 400px;
}
<div class="dVolver">
<form method="POST" action="creatabla.php">
<input type="submit" value="VOLVER">
</form>
</div>
<br><br>
<div class="dVolver">
<input type="submit" value="VOLVER">
</div>
Well, it turns out that if you run the code here you see it correctly, but if you try it in Chrome or Firefox you will see that in the first one div
the BACK button is not centered, at the bottom there is more space than at the top. In the second div the button is centered because I have deleted the form, but I need the form, I cannot delete it.
Why doesn't it come out centered correctly?
The reason would be that in the first div you have two elements, and in the second a single element try removing the class from the div and putting the same class on the form
I hope it helps you.
Hello! If you want to center everything inside the div element , you have to first place everything inside the div element, and then simply add the following styles to the div :
Try it with line-height;
Is a value that controls the space between lines with relative percentage values. It works by giving the same value to both elements.