Need help to vertically centre text

HTML & CSS
1

Need a little help.
After you register and press submit you are send to this page:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Redirect</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Refresh" content="2;url=../home.php">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container h-100">
    <div class="row d-flex justify-content-center">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                <h5 class="display-5">User have been created</h5>
                <p class="lead">Thank you for making an account to our site.</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

The text is align like this:

page
page1920Ă—1080 108 KB

But i want my text to be align in the center of the page like this(edited in paint):

page2
page21920Ă—1080 111 KB

What exactly do i have to change in the code to make it like that.

2

Hi sebibest750, welcome to the forum! :slight_smile:

You’re using Bootstrap class to horizontally center the box:

<div class="row d-flex justify-content-center">

I’m not familliar with Bootstrap, but if there is a class for that justify (row wise), there should also be a class to add for align (column wise),
maybe like: “align-items-center” in the avaiable container space (“h-100”).

DuckDuckGo found some sites where you could try those classes out, though this one’s a bit old:
https://codingthesmartway.com/introduction-to-bootstrap-4-flex-layout/

Let’s hear how you achieved what you wanted (without Paint). :slight_smile:

1 Like
3

this i can help with maybe :slight_smile:

here ya go

i have No idea what H-100 does but had to remove it for css

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Redirect</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Refresh" content="2;url=../home.php">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<style> 
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

</style>


<body>

<div class="container">
    <div class="row d-flex justify-content-center">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                <h5 class="display-5">User have been created</h5>
                <p class="lead">Thank you for making an account to our site.</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>
4

To do it the bootstrap way you would need to set the html and body to height:100% and then ensure that .container and .row have the h-100 class added. Then in order to center in the viewport you would add the align-content-center class mentioned by Erik.

Here’s a working example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Redirect</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
html,body{height:100%}
</style>
</head>

<body>

<div class="container h-100">
    <div class="row d-flex justify-content-center align-content-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                <h5 class="display-5">User have been created</h5>
                <p class="lead">Thank you for making an account to our site.</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

You could of course not touch the css and add the h-100 class to the html and body elements if you don’t wish to change them globally.

e.g.

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<title>Redirect</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body class="h-100">
<div class="container h-100">
  <div class="row d-flex justify-content-center align-content-center h-100">
    <div class="col-6 mx-auto">
      <div class="jumbotron">
        <h5 class="display-5">User have been created</h5>
        <p class="lead">Thank you for making an account to our site.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

If you didn’t want to set the html and body to height:100% you could instead add a new class of your own making to .container and set it to height:100vh (vh =viewport height and doesn’t need an unbroken chain of heights back to root) and then remember remove the h-100 class from .container.

The absolute method mentioned in the post above will also work fine but of course takes everything out of the flow if indeed you did want following content.:slight_smile:

Lastly remember not to directly change the behaviour of the bootstrap classes because the whole bootstrap grid system is based on these classes and if you change one then the whole grid could be affected. Use a new class name of your own making when you want to modify the behaviour of an existing element in isolated cases.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.