How to Center Align Image in Bootstrap

Created: 26th Jan 26 2 Views
Review needed
Verified
Loading...
Loading...
Comments

Images are left-aligned by default. One simple way it to warp the img tag with tags, but it is not recommended as center tags are deprecated.

If you want an image to be center-aligned for bootstrap UI, you can make use of the class center-block

If you have a look at the center-block class in bootstrap.css then you may find,

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

Demo html code: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Center Align image in bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<script src="js/ie-emulation-modes-warning.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>
<div class="container">
<img src="http://code2care.org/tools/images/code2care-logo.png" 
alt="Center Align image in bootstrap" 
class="img-rounded center-block">
</div>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
</body>
</html>

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!