Vertically Center Text Bootstrap

Question

I wanted to center vertically my text inside a

div class="col-md-6"

and have the same height

Example:

Will the text wrap onto two lines? If not, you can just use the CSS `line-height` property, and set it to match your fixed height. — BenM, May 26 '17 at 11:30
this link might help https://stackoverflow.com/a/20548578/7714663 — this.girish, May 26 '17 at 11:44
helpful, working for me: https://stackoverflow.com/a/69777645/7186739 — Billu, Oct 31 '21 at 15:55

score 21 · Answer 1 · answered Mar 31 '19 at 01:00

this is bootstrap 4:

<html><head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
<div class="row">
<div class="col-6">
    <img src="https://media.haircutinspiration.com/photos/20181204011855/boy-hairstyle-e1536810585307.jpg" class="img-fluid">
</div>
    <div class="col-6 align-self-center">
        hello hello
    </div>

</div>
  </body>

`align-self-center` on the column did the trick for me. Thanks! — mihca, Aug 16 '22 at 18:02

Mohideen bin Mohammed · Answer 2 · 2017-05-26T11:47:12.810

18

Check my snippet it will work as you want ...

.content_center {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 250px;
  height: 150px;
  border : 1px solid black;
}

<div class="content_center col-md-6">
What I want
</div>

edited May 26 '17 at 11:47

answered May 26 '17 at 11:36

Mohideen bin Mohammed

18,813
10
112
118

This is the proper solution if you intend to align both horizontally (justify-content: center) and vertically (align-items: center), both with a set height, and the display: flex option. – xarlymg89 Aug 04 '20 at 13:45

score 15 · Answer 3 · answered May 26 '17 at 11:47

Define a custom class and use as follows:

.vertical-align {
    display: flex;
    align-items: center;
}

<div class="container">
    <div class="row vertical-align">
        <div class="col-md-6"><img src=" http://placehold.it/150x50" /></div>
        <div class="col-md-6">Dummy text</div>
    </div>
</div>

Yadhu Babu · Accepted Answer · 2018-11-19T04:21:37.500

8

Use margin-top:50%; to the text;

.vertical{
margin-top:50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


  
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <img alt="img" src="http://asianmeditour.com/assets/images/post/1542457653tourism.jpg" class="img-responsive">
      
    </div>
    
    <div class="col-sm-6">
      <h3 class="vertical">Column 3</h3>        
      
    </div>
  </div>
</div>

</body>
</html>

edited Nov 19 '18 at 04:21

answered May 26 '17 at 11:38

Yadhu Babu

1,503
2
13
25

2

it works well if the text is only 1 line, but how about a text with multple lines ? (the top margin will be 50%, but the white space in the bottom won't be 50% – Gers May 16 '19 at 13:04
@Gers did you find any solution – MrinmoyMk Apr 16 '20 at 20:53
@Mri I can't really remember if I did at that moment. But one thing you can do is to use CSS' **align-items** property. It seems it's supported by most browser now, so it should do the trick The code would look like `
Your awesome content
` – Gers Apr 17 '20 at 13:00
documentation reference: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items – Gers Apr 17 '20 at 13:04

Nithin Charly · Answer 5 · 2017-05-26T12:02:42.010

4

If you know the height, then set line height equal to height of div if there is single line.

If more than one line.

HTML

<div class="col-xs-6 floatingDiv">
    This should be in the middle
</div>

CSS

.floatingDiv {
    display: flex;
    align-items:center;
}

edited May 26 '17 at 12:02

answered May 26 '17 at 11:34

Nithin Charly

285
3
9

score 4 · Answer 6 · answered May 26 '17 at 11:44

4

Try following css on your text element:

.className{
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

answered May 26 '17 at 11:44

Bhuwan

16,525
5
34
57

Brilliant, and doesn't even need bootstrap to work! – Zenul_Abidin Aug 10 '21 at 01:02

score 4 · Answer 7 · edited Jun 09 '20 at 15:58

4

in Bootstrap 4, use the class align-self-center in the parent element.

<div class="align-self-center">
    hello hello
</div>

edited Jun 09 '20 at 15:58

jpaugh

6,634
4
38
90

answered May 08 '19 at 11:23

Shneor

304
3
4

parent element is the key distinction. – aaronium112 May 16 '20 at 19:25
@Shneor I switched from a snippet to a regular code block, since a runnable demo requires quite a bit more boilerplate. I considered adding said boilerplate, but it would ruin the simplicity of this example. – jpaugh Jun 09 '20 at 15:59

score 2 · Answer 8 · answered Dec 15 '20 at 11:01

Based on Bootstrap 4, which is now flex-based, you can use the align-items-center utility on a Bootstrap row to vertically centre the row's content.

For instance:

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <img alt="img" src="http://asianmeditour.com/assets/images/post/1542457653tourism.jpg" class="img-fluid">
    </div>
    <div class="col-8">
      Text vertically centred!
    </div>
  </div>
</div>

JSFiddle here.

I found about the align-items-center keyword here.

score 1 · Answer 9 · answered May 26 '17 at 11:44

1

<div class="col-md-6" style="height: 450px;background-color: red;"> 
       <div class="v_align">
            What i have

       </div> 
</div>

<style>
.v_align {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}
</style>

answered May 26 '17 at 11:44

Arun

1,609
1
15
18

Vertically Center Text Bootstrap

9 Answers9

HTML