How to Center Align Image in Bootstrap

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>

Output:

Image Center Aligned in Bootstrap

More Posts related to CSS,

More Posts: