How to Center An Image (Bootstrap 3, 4, or plain HTML/CSS)
/* Wrap the image in a div and use text-align center */
.text-align-center {
text-align: center;
}
/* Or, apply this CSS directly to the image to center it */
.centered-image {
display: block;
margin-left: auto;
margin-right: auto;
}
/******* Ignore the CSS Below :) *******/
/* Basic Styling for this page below
nothing to do with image centering */
/**************************************/
body {
background-color: #333;
color: #eee;
font-family: verdana;
font-size: 16px;
max-width: 1024px;
margin: 0 auto;
min-width: 450px;
}
main {
background-color: #222;
padding: 1em 4em;
}
.section {
border-bottom: 1px solid #333;
margin-bottom: 2em;
padding-bottom: 2em;
text-align: center;
}
.section p,
.section h2,
.section h1,
.section ul {
text-align: left;
}
h2 {
color: #F9D423;
}
pre {
background-color: #eee;
color: #222;
display: inline-block;
padding: 1em;
text-align: left;
}
img {
max-width: 100%;
}
@media (max-width: 625px) {
body {
font-size: .7rem;
}
}
@media (max-width: 515px) {
body {
font-size: .6rem;
}
}
// Ignore this code - it has nothing to do with centering images :)
// It displays HTML code on the page.
document.getElementById('bs3-code-text-center').innerHTML =
escape(`<div class="text-center">
<img src="https://source.unsplash.com/iYQC9xWMvw4/1024x768">
</div>`).replace(/%(..)/g,"&#x$1;");
document.getElementById('bs3-code-center-block').innerHTML =
escape(
`<img class="img-responsive center-block"
src="https://source.unsplash.com/iYQC9xWMvw4/1024x768">`
).replace(/%(..)/g,"&#x$1;");
document.getElementById('bs4-code-text-center').innerHTML =
escape(`<div class="text-center">
<img src="https://source.unsplash.com/iYQC9xWMvw4/1024x768">
</div>`).replace(/%(..)/g,"&#x$1;");
document.getElementById('bs4-code-center-block').innerHTML =
escape(
`<img class="mx-auto d-block"
src="https://source.unsplash.com/iYQC9xWMvw4/1024x768">`
).replace(/%(..)/g,"&#x$1;");
<main>
<div class="section">
<h1>How To Center An Image with HTML/CSS, Bootstrap 3, and Boostrap 4</h1>
</div>
<div class="section">
<h2>How To Center An Image Using Bootstrap 3</h2>
<p>Wrap the image in a <div> and use the <code>text-center</code> class:
<pre id="bs3-code-text-center"></pre>
<p>Alternatively, if your image uses the <code>img-responsive</code> class, you can use <code>center-block</code>. No <div> needed! :)
<pre id="bs3-code-center-block"></pre>
</div>
<div class="section">
<h2>How To Center An Image Using Bootstrap 4</h2>
<p>Wrap the image in a <div> and use the <code>text-center</code> class. This is exactly the same as above with Bootstrap 3:
<pre id="bs4-code-text-center"></pre>
<p>Or, you can apply the <code>mx-auto</code> and <code>d-block</code> classes directly to the image. No <div> needed! :)
<pre id="bs4-code-center-block"></pre>
</div>
<div class="section">
<h2>How To Center An Image With CSS - no Bootstrap required</h2>
<p>(See the commented HTML and CSS in this codepen for code details.)</p>
<p>Wrap the image in a <div> and assign a class with <code>text-align: center;</code> in your CSS.</p>
<!--
/////////////// SAMPLE CODE BELOW! /////////////////
Wrap the Image in a div and assign a class to the div that uses text-align: center;
Here, we use a class named 'text-align-center' which you can find in the CSS panel
of this codepen.
-->
<div class="text-align-center">
<img src="https://source.unsplash.com/iYQC9xWMvw4/320x240" alt="kitten">
</div>
<!-- -- -- -- -- -- -- -- -- -->
<p>Or, assign a class to your image with <code>display: block;</code> and <code>margin-left: auto; margin-right: auto;</code> in your CSS.</p>
<!--
Another way is to use a class on the image itself. Here we made a class called
'centered-image' and you can see how it is styled in the CSS panel of this codepen.
-->
<img class="centered-image" src="https://source.unsplash.com/iYQC9xWMvw4/320x240" alt="kitten">
<!--
//////////////// END OF SAMPLE CODE /////////////////
-- -- -- -- -- -- -- -- -->
</div>
<div class="section">
<h3>Have fun centering your images!!</h3>
<ul>
<li><strong>Latest Bootstrap 3: </strong><a href="https://www.bootstrapcdn.com" target="_blank">https://www.bootstrapcdn.com/</a></li>
<li><strong>Latest Bootstrap 4: </strong><a href="https://v4-alpha.getbootstrap.com/getting-started/download/#bootstrap-cdn" target="_blank">https://v4-alpha.getbootstrap.com/getting-started/download/#bootstrap-cdn</a>
</ul>
</div>
</main>
A Pen by HARUN PEHLİVAN on CodePen.