Html: Centering two div vertically and align one of them in the left side and the other one in the right

Question

I'm using Bootstrap to style my html page. This is what I'm getting:

Both word are at the top of the screen but I'd like for them to be in middle vertically. Also they are in the center horizontally and I need them to be on the left and the right side of the screen.

Something like this:

This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

    <div class="container">
        <div class="row align-items-center">        
            <div class="col align-self-start">
                Hello
            </div>
            <div class="col align-self-end">
                World
            </div>
        </div>
    </div>
</body>
<script src="script.js" defer></script>
</html>

I've tried different approach but very little change no metter how I edit my code.

Does this answer your question? [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) — Sean Conkie, Jan 03 '23 at 22:41

Mark Schultheiss · Answer 1 · 2023-01-04T21:07:19.517

0

Perhaps you mean align the text? somewhat unclear on the question if you mean the text to the entire "block" of the column.

.container *,.container-fluid *  {
  border: solid 1px pink;
  padding: 1rem;
}
.test-high{height: 14rem;}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container ">
  <div class="row align-items-center test-high">
    <div class="col text-left">
      Hello
    </div>
    <div class="col text-right">
      World
    </div>
  </div>
</div>
<div>A ml-auto example for the entire div removed the col class</div>
<div class="container">
  <div class="row test-high align-items-center ">
    <div>Hello</div>
    <div class="ml-auto">World</div>
  </div>
</div>
<div>A col example for the entire div as a column - note content may get outside its container col-1 and need say col-2 etc. ml-auto does the fun alignment</div>
<div class="container-fluid">
  <div class="row test-high align-items-center ">
    <div class="col-1">Hello</div>
    <div class="ml-auto col-1">World</div>
  </div>
</div>

edited Jan 04 '23 at 21:07

answered Jan 03 '23 at 22:50

Mark Schultheiss

32,614
12
69
100

I added a second example if you meant the entire bock/div – Mark Schultheiss Jan 03 '23 at 23:29
Added a third example with container-fluid and notes on col size/content – Mark Schultheiss Jan 03 '23 at 23:46
The third example works great to set the image on the side of the screen and was what I needed! The only problem is that the images are still on the top area of the screen and not centered vertically – Diana Mele Jan 04 '23 at 00:03
Try adding the `align-middle` class to the row - not easy to reproduce with the sample; would probably have to make the container forced to larger (which may reduce the value of the container class perhaps) Ref https://getbootstrap.com/docs/4.0/utilities/vertical-align/ – Mark Schultheiss Jan 04 '23 at 00:07
I tested this with some forced height and then added the `align-items-center` class to do that vertical for this example and added that. – Mark Schultheiss Jan 04 '23 at 21:08

score 0 · Answer 2 · answered Jan 03 '23 at 23:25

0

Bootstrap has classes for vertical alignment. You’d want align-middle - bootstrap docs

answered Jan 03 '23 at 23:25

Sean Conkie

127
1
8

ivan irvine · Answer 3 · 2023-01-04T00:55:03.140

body, html {
  height: 100%;
  background:#c9edff;
}
body {
margin: 0;
background: teal;
}
a {
  text-decoration: none;
  color: black;
  font-family: 'roboto';
}
.align-self-start {
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
padding-left: 10px;
margin: 0 auto;
left: 0%;
background: whitesmoke;
padding: 10px;
box-shadow: 0px 0px 1px;

}
.align-self-start li {
padding-left: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end {
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
padding-right: 10px;
margin: 0 auto;
right: 0%;
background: darkgreen;
padding: 10px;
box-shadow: 0px 0px 1px;
}
.align-self-end li {
padding-right: 10px;
list-style: none;
padding-top: 10px;
}
.align-self-end a {
color: yellow;
margin: auto;
}
.nav_bar {
width: 100%;
background: lightblue;
display: inline-flex;
}
.nav_bar li {
margin: auto;
list-style: none;
}
.nav_bar a {
color: black;
}
a {
margin: auto;
text-align: center;
}
.border_form {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.border_form input{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
}
.border_form input:focus{
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
.border_form button {
height: 40px;
width: 400px;
border: none;
box-shadow: 0px 0px 0px whitesmoke;
outline: none;
}
footer  {
  bottom: 0;
  box-shadow: 0px 0px 1px;
  background-color: yellow; 
  position: absolute;
  width: 100%;
    text-align: center;
}
footer li { 
list-style: none;
display: inline-flex;
    }
  footer a { 
padding-left: 10px;
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>Title</title>
  </head>
  <body>
<div class="nav_bar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>


</ul>
</div>
<div class="border_form">
<form>
<input type="text" class="username_css" placeholder="Username">
<br>
<br>
<input type="password" class="password_css" placeholder="Password">
<br>
<br>
<button type="submit">Login</button>
</form>
</div>
<div class="container">
        <div class="row align-items-center">       
            <div class="col align-self-start">
              <ul>
              <li><a href="#">Hello 1</a></li>
               <li><a href="#">Hello 2</a></li>
                <li><a href="#">Hello 3</a></li>
                 <li><a href="#">Hello 4</a></li>
                 </ul>
            </div>
            <div class="col align-self-end">
              <ul>
             <li><a href="#">World</a></li>
               <li><a href="#">World 2</a></li>
                <li><a href="#">World 3</a></li>
                 <li><a href="#">World 4</a></li>
                 </ul>
            </div>
        </div>
    </div>
    <footer>
      <ul>
                 <li><a href="#">Footer</a></li>
               <li><a href="#">Footer 2</a></li>

                <li><a href="#">Footer 3</a></li>
                </ul>
    </footer>
    </body>
    </html>

// for all 1080p screens Its been updated. This method will work on any browser. If it is not working on any other browser.. Then you need to use

@media only screen and (max-width: 1920px) {
.your_div {

}
}
// for iphone se
@media only screen and (max-width: 375px)  {
.your_div {

}

}

^^ and you need to add

still invalid - an `li` must be nested into a parent `ul` OR `ol` - your browser MAY work but that is on the browser developer trying to handle poorly written HTML ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li — Mark Schultheiss, Jan 03 '23 at 23:16
And yet you’re posting invalid html, which serves no useful purpose. — David Thomas, Jan 03 '23 at 23:37
I am totally, sorry! I never checked my html syntax, it is all checked now. Please forgive me! Hope this edit, works. — ivan irvine, Jan 04 '23 at 00:53

Html: Centering two div vertically and align one of them in the left side and the other one in the right

3 Answers3