How to vertically align text in a container,

Question

I searched this forum for such a long time but I couldn't find anything that could answer my question.

I have a container with two side by side sections. I want the text on the left side to vertically align center in its container based on the height of the container on the right side.

I used my-auto, m-auto, and several other bootstrap css classes, and also some of my custom ones, but none of them seemed to work.

Please see attached code to understand (open in a full page or expand the snippet so you can see the sections side by side)

<!DOCTYPE html>
<html>

<head>
  <!-- CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
  <div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 bg-light">
          <div class="m-auto p-5">
            <h2>Content that needs to be vertically aligned</h2>
          </div>
        </div>
        <div class="col-md-6 bg-primary">
          <div class="ml-5 space-top-2 space-bottom-2 pr-10">
            <div class="container">
              <div class="row space-bottom-2">
                <div class="col-md-3">

                </div>
                <div class="col-md-9">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas leo laoreet nunc congue, at venenatis risus tristique. Suspendisse ac augue metus. Donec finibus velit at accumsan tristique. Sed eu sapien sed purus fringilla
                    pretium. Curabitur ac nisl at massa vulputate hendrerit eget non urna. Praesent nec turpis vitae velit semper efficitur. Nullam a diam rutrum, venenatis nisl sit amet, placerat felis. Nullam semper, augue ut vestibulum venenatis, quam
                    tellus ornare enim, ut mattis nibh ante vitae dui. Nunc elementum, sem at aliquet vulputate, ipsum tellus volutpat arcu, ut imperdiet orci turpis sit amet velit. Sed et eros nec ipsum sagittis scelerisque vel at urna. Nunc ante lacus,
                    facilisis in feugiat et, pharetra sit amet orci. Nullam tincidunt ligula et nunc tempor posuere. Sed faucibus cursus urna, non porta tortor dignissim in. Nulla in urna et ligula fermentum imperdiet.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

score 0 · Answer 1 · answered Oct 16 '20 at 03:57

0

paste this in your css file...

.col-md-6 {
    margin-top: auto;
    margin-bottom: auto;
  }

answered Oct 16 '20 at 03:57

huzzzus

172
10

That didn't work for me. I already tried my-auto, which is the same thing. – Luke Darius Oct 16 '20 at 04:04
it worked for me. can you try adding display: inline-block to this class. – huzzzus Oct 16 '20 at 04:10
It made it centered, but i already tried something that got me a similar result. The problem is, the height of the background shrinks into the size of the text, and does not keep the height of the whole area. – Luke Darius Oct 16 '20 at 05:11

score 0 · Answer 2 · answered Oct 16 '20 at 04:09

0

Just add this:

.col-md-6{
  display: flex;
}

answered Oct 16 '20 at 04:09

Pranav Rustagi

2,604
1
5
18

score 0 · Accepted Answer · answered Oct 16 '20 at 04:43

0

By using flex in css, we can achieve this.

<div class="col-md-6 bg-light h-100 d-flex align-items-center justify-content-center">

Here, align-items-center makes the text vertically center and justify-content-center makes the text horizontally center.

answered Oct 16 '20 at 04:43

Rafee Shaik

681
4
10

Thanks so much, this worked perfectly! – Luke Darius Oct 16 '20 at 05:12

score -1 · Answer 4 · answered Oct 16 '20 at 04:39

You can use CSS grid's place-item for this. It will align your text vertically/horizontally.

.parent {
    display: grid;
    place-items: center;
    
    /* meaningless styling */
    width: 200px;
  height: 200px;
  background: lightblue;
    resize: both;
  overflow: auto;
  }

  <div class="parent" >
  <div class="box">Centered text.</div>
  </div>

How to vertically align text in a container,

4 Answers4