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:
More Posts related to CSS,
- How to create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- What is the Difference Between Microsoft SharePoint vs OneDrive - SharePoint
- ls Command to See Hidden Files - Linux
- Microsoft Teams Zoom In and Zoom Out Keyboard Shortcut - Teams
- Java JDBC Delete a Record in Database Table using PreparedStatement - Java
- Docker Run Command Examples - Part 1 - Docker
- Customizing Notepad++ New Document Line Encoding: CR/LF/CR LF - NotepadPlusPlus
- Get HTTP Request Response Headers Safari Browser - MacOS
- How to install Android Studio Chipmunk and SDK tools on macOS (2021.2) - Android-Studio