Skip to content
Fix Code Error

Center image using text-align center?

March 13, 2021 by Code Error
Posted By: Anonymous

Is the property text-align: center; a good way to center an image using CSS?

img {
    text-align: center;
}

Solution

That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.

Use this instead:

img.center {
    display: block;
    margin: 0 auto;
}
<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>
Answered By: Anonymous

Related Articles

  • Active tab issue on page load HTML
  • Having trouble with my nav bar/header, It used to work but…
  • Pandas pivot_table: filter on aggregate function
  • Use css gradient over background image
  • insert tables in dataframe with years from 2000 to 20018…
  • SQL find sum of entries by date including previous date
  • How do I do a drag and drop using jQuery to move data…
  • Navbar not filling width of page when reduced to mobile view
  • Show/hide 'div' using JavaScript
  • Centering in CSS Grid

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How do I set/unset a cookie with jQuery?

Next Post:

Send POST data using XMLHttpRequest

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error