Creating content in HTML that features two div elements centered vertically on a page, with one div aligned to the left and the other aligned to the right

Question

Creating content in HTML that features two div elements centered vertically on a page, with one div aligned to the left and the other aligned to the right

Implementing Bootstrap for styling my HTML page has resulted in the following layout:

https://i.sstatic.net/wzsnc.png

Currently, both words are positioned at the top of the screen. However, I aim to have them vertically centered. Additionally, they are centered horizontally, but I want one word on the left and the other on the right side of the screen.

The desired layout is shown below:

https://i.sstatic.net/Q3lhT.png

This is the code I'm using:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1a001e001e">[email protected]</a>/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 experimented with various methods, but there seems to be minimal change regardless of how I modify the code.

html css bootstrap-4

Answer 1

Answer №1

Vertical alignment in Bootstrap can be achieved using classes such as align-middle. For more information, you can refer to the official Bootstrap documentation

Answer 2

Vertical alignment in Bootstrap can be achieved using classes such as align-middle. For more information, you can refer to the official Bootstrap documentation

Answer 3

Answer №2

It appears that the query is about aligning text, although it is not entirely clear whether the alignment pertains to the text within 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8a908e908e">[email protected]</a>/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>An example with ml-auto for the entire div, with the col class removed</div>
<div class="container">
  <div class="row test-high align-items-center ">
    <div>Hello</div>
    <div class="ml-auto">World</div>
  </div>
</div>
<div>An example using col for the entire div as a column - note that content may overflow its container if only set to col-1 and might require col-2 etc. ml-auto does the interesting 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>

Answer 4

It appears that the query is about aligning text, although it is not entirely clear whether the alignment pertains to the text within 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8a908e908e">[email protected]</a>/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>An example with ml-auto for the entire div, with the col class removed</div>
<div class="container">
  <div class="row test-high align-items-center ">
    <div>Hello</div>
    <div class="ml-auto">World</div>
  </div>
</div>
<div>An example using col for the entire div as a column - note that content may overflow its container if only set to col-1 and might require col-2 etc. ml-auto does the interesting 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>

Answer 5

Answer №3

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 don't forget to include the necessary media queries for different screen sizes.

Answer 6

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 don't forget to include the necessary media queries for different screen sizes.

Creating content in HTML that features two div elements centered vertically on a page, with one div aligned to the left and the other aligned to the right

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery to add emoticons to a div element

"Enhance Your Website Navigation with Bootstrap Navbar Links Extensions

Navigating from an offspring link to a social media platform page

Use sed to extract integers from HTML based on various criteria

The presence of Null is detected during the HTML parsing process

Execute scroll to top animation but without utilizing $('html,body').animate({scrollTop: 0}, 'slow')

How to align text to the left and right within a Bootstrap accordion

Maintain the central alignment of the entire page (including the horizontal scrollbar) while zooming in

Steps for eliminating a column from a table

VSCODE's intellisense feature seems to be ignoring CSS code within JSX files

Is it possible to modify the size of a bullet image in Javascript?

What is the purpose of text-indent when using image replacement techniques?

The importance of blending classes versus isolating classes in CSS selectors

Excessive white space at the bottom of a floated image within a small parent element

I must design a unique layout for my website

implement an angular directive to apply a CSS element

Using jQuery to update the input value when the mouse hovers over a div

The AJAX navigation feature does not function properly on Windows or Safari browsers, whether on a Mac or PC

Slide the menu off to the right

The utilization of `ngSwitch` in Angular for managing and displaying