Greetings friends, I am starting to program with PHP, and beginning to develop under the MVC pattern, this means that I will always have a static header and in separate files I will put the content that will appear below the header and before the Footer... (No I know if I can be clear with my idea). I want only a greeting to appear on my home page, but I want it to always be vertically centered no matter what screen height it is displayed on.
In this case I want that "Welcome" to always be vertically centered, the home page will have no other content.
Here I show the code that I have put in my home page.
<div class="py-5 contenido1">
<div class="row">
<div class="col-12" id="saludo">
<p>Bienvenido..!</p>
</div>
</div>
</div>
This is the code I have for my CSS style sheet.
*{
margin: 0;
padding: 0;
}
#saludo p {
font-family: 'Berkshire Swash', cursive;
font-size: 70px;
text-align: center;
}
In my template.php file I have the following code, to include the content of my following pages.
<div class="container-fluid">
<div class="container">
<?php
include 'paginas/inicio.php';
?>
</div>
</div>
I appreciate if you can help me how to center my greeting vertically, because I have tried with bootstrap classes, with css, but in reality none has worked for me so far, maybe I am not layout correctly but I can not find the error.
The result I want to achieve is this:
Stay tuned to your comments.
You can use the classes that bootstrap has on
flex
. The classd-flex
is equivalent todisplay: flex
in css, to center the child elements on the vertical axis the class is usedalign-items-center
and for the horizontal axisjustify-content-center
. More information in the following link: https://getbootstrap.com/docs/4.5/utilities/flex/An example of how it works is the following (the height styles are only to show the centering of the elements):
you can do this using flexbox add the following properties to your content1 element
adding that should suffice, greetings