markdown 如何居中图像（Bootstrap 3,4或纯HTML / CSS）

Posted 2021-05-06

/* 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 &lt;div&gt; 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 &lt;div&gt; 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 &lt;div&gt; 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 &lt;div&gt; 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 &lt;div&gt; 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>

How to Center An Image (Bootstrap 3, 4, or plain HTML/CSS)
----------------------------------------------------------


A [Pen](https://codepen.io/harunpehlivan/pen/dmPBKK) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/dmPBKK/license).