0

I am trying to create a heading next to an image for the main banner of a web page. An example of what I'm trying to do can be found here: https://optimaninja.com/

I'm using bootstrap, and here is some simple starter code I have to begin:

BOOTSTRAP CODE:

<!DOCTYPE html>
<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

</head>
<body>
  <div class='container other'>
    <div class="row">
      <div class="col-5">
        <h3>Understand Police Behavior</h3>
      </div>
      <div class="col-7">
        <img src="pic.jpg" class="img-fluid" style="max-width: 600px;">
      </div>
    </div>
  </div>
</div>
</body>
</html>

It yields a front page that looks like this:

enter image description here

What I would like to do is get my heading aligned vertically so that it is centered next to the image, and not up top.

In order to do so, I've tried different permutations of the following CSS selectors to both the other and h3 elements:

<style>
.other {
  vertical-align: center;
  justify-content: center;
  align-items: center;
}
</style>

None of this seems to have any effect.

Thank you for your help.

Jonathan Bechtel
  • 3,497
  • 4
  • 43
  • 73

3 Answers3

4

You can try adding the "align-items-center" class to your "row" div (or change your .other to .row in your CSS).

Ludal
  • 110
  • 1
  • 7
2

use the bootstrap class of flex alignment

d-flex justify-content-center align-items-center


<!DOCTYPE html>
<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

</head>
<body>
  <div class='container other'>
    <div class="row position-relative">
      <div class="position-absolute h-100 d-flex justify-content-center align-items-center">
        <h3>Understand Police Behavior</h3>
      </div>
      <div class="col-12">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img-fluid" style="max-width: 600px;">
      </div>
    </div>
  </div>
</div>
</body>
</html>
Deepu Reghunath
  • 8,132
  • 2
  • 38
  • 47
0

okay just use this in your style tag

.row {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    and listen my tip you can not use propertys like this vertical-         align: center;
      justify-content: center;
      align-items: center;
     without discribing your dispay
novaRit
  • 44
  • 2