0

Here is my code: image is not centering top and bottom , i tried all google methods. i have added img-fluid and img-thumbnail both also used my-auto . normal margin like margin: 10% working only auto is not working.

 <div class="intro">
       <div class="row">
        <div class="col-10 col-md-12 col-lg-6">   
        <img class=" img-fluid " src="./img/l-intro-img.jpg" alt="l-intro-img"/>
      </div>
      <div class="col-12 col-md-12 col-lg-6">
        <h1>Random text</h1>
      </div>
    </div>
    </div>

.intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(../img/bg-intro.svg);
  background-position: center;
  background-size: auto;
}

.img-fluid {
  display: block;
  margin: auto 0px;
}
How to Program
  • 331
  • 1
  • 3
  • 15
  • Does this answer your question? [How can I center an image in Bootstrap?](https://stackoverflow.com/questions/43226511/how-can-i-center-an-image-in-bootstrap) – mahan Aug 27 '20 at 10:06

3 Answers3

1

Solution to your problem:

.intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(https://source.unsplash.com/random/560x560);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img-fluid {
  display: block;
  margin: auto 0px;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
  <div class="intro">
    <div class="row">
      <div class="col-md-12 col-lg-6  d-flex justify-content-center align-items-centerr">
        <img class=" img-fluid" src="https://via.placeholder.com/150x154" alt="l-intro-img" />
      </div>
      <div class="col-md-12 col-lg-6 text-center">
        <h1 class="text-white">Random text</h1>
      </div>
    </div>
  </div>
</body>

You may want to find this in jsfiddle

RICHARD ABRAHAM
  • 2,218
  • 20
  • 26
0

you are using image in Background, so your have to be more specific with the div size and image size you are using, for avoiding this problem use these two properties 1* background-position-x:50%; 2* background-positon-y:50%;

Tayyab Noor
  • 1
  • 3
0

Use background-size: contain; to align center.

.intro {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(../img/bg-intro.svg);
  background-position: center;
  background-size: contain;
}

Please include mx-auto text-center class to div above the image.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="intro">
   <div class="row">
    <div class="col-10 col-md-12 col-lg-6 mx-auto text-center">   
      <img class="img-fluid " src="https://i.stack.imgur.com/quhig.png" alt="l-intro-img"/>
    </div>
    <div class="col-12 col-md-12 col-lg-6 text-center">
      <h1>Random text</h1>
    </div>
</div>
</div>