PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, November 18, 2022

[FIXED] How to align the image in center inside a div using Bootstrap 4?

 November 18, 2022     bootstrap-4, css, twitter-bootstrap, vertical-alignment     No comments   

Issue

I'm using the latest version of Bootstrap i.e. v4.0.0-beta.3 and I've an image which is located inside a div tag whose height is fixed and I want to align the image in the absolute center of the div tag. Although I'm able to align the image in horizontal center using mx-auto and d-block classes but for the vertical alignment, I'm unable to do so even after following the methods from many stackoverflow answers like this and this. Here is the code.

.border-section {
  border: 2px solid #D0D0D0;
  margin-top: 20px;
}
<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-4 border-section" style="height:290px">
      <img class="mx-auto d-block img-fluid" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" alt="View">
    </div>
  </div>
</div>

Can anyone please help?


Solution

Try this

.border-section {
  border: 2px solid #D0D0D0;
  margin-top: 20px;
  position: relative;
}

img {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  top: 0;
  bottom: 0;
}
<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-4 border-section" style="height:290px">
      <img class="mx-auto d-block img-fluid" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" alt="View">
    </div>
  </div>
</div>



Answered By - vj.madamala7
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing