CODEWITHSUNDEEP
htmlcssbootstrap-4
How to Program
How to Program

Reputation: 389

i can't center image in bootstrap row

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;
}

Upvotes: 0

Views: 332

Answers (3)

RICHARD ABRAHAM
RICHARD ABRAHAM

Reputation: 2528

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

Upvotes: 1

user13907403
user13907403

Reputation:

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.sstatic.net/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>

Upvotes: 0

Tayyab Noor
Tayyab Noor

Reputation: 1

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%;

Upvotes: 0

Related Questions