Center image using text-align center

Question

Is the property text-align  center  a good way to center an image using CSS   img       text-align  center

User · Answer

I discovered that if I have an image and some text inside a div, then I can use text-align:center to align the text and the image in one swoop.

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

User · Answer

If you are using a class with an image then the following will do  class       display  block      margin  0 auto      If it is only an image in a specific class that you want to center align then following will do   class img       display  block      margin  0 auto

User · Answer

img-container     display  flex     img     margin  auto      this will make the image center in both vertically and horizontally

User · Answer

Only if you need to support ancient versions of Internet nbsp Explorer   The modern approach is to do margin  0 auto in your CSS   Example here  http   jsfiddle net bKRMY   HTML    lt p gt Hello the following image is centered lt  p gt   lt p class  pic  gt  lt img src  https   twimg0-a akamaihd net profile images 440228301 StackoverflowLogo reasonably small png   gt  lt  p gt   lt p gt Did it work  lt  p gt    CSS   p pic       width  48px      margin  0 auto      The only issue here is that the width of the paragraph must be the same as the width of the image  If you don t put a width on the paragraph  it will not work  because it will assume 100  and your image will be aligned left  unless of course you use text-align center   Try out the fiddle and experiment with it if you like

User · Answer

Use    lt dev class  col-sm-8  style  text-align  center   gt  lt img src    URL  image car-trouble-with-clipping-path jpg       gt  lt  dev gt    I think this is the way to center an image in the Laravel framework

User · Answer

Simply change parent align     Try this one on parent properties   text-align center

User · Answer

Use this to your img CSS   img     margin-right  auto    margin-left  auto

User · Answer

I came across this post  and it worked for me    x000D   x000D  img   x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    margin  auto  x000D    x000D   lt div style  border  1px solid black  position relative  min-height  200px  gt  x000D     lt img src  https   cdn sstatic net Sites stackoverflow company img logos so so-icon png v c78bd457575a  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D     Vertical and horizontal alignment

User · Answer

You can use text-align  center on the parent and change the img to display  inline-block  rarr  it therefore behaves like a text-element and is will be centered if the parent has a width   img       display  inline-block

User · Answer

Another way of doing it would be centering an enclosing paragraph    x000D   x000D   lt p style  text-align center  border 1px solid black  gt  lt img src  https   cdn sstatic net Sites stackoverflow company img logos so so-icon png v c78bd457575a  gt  lt  p gt  x000D   x000D   x000D

User · Answer

That doesn t always work    if it doesn t  try   img       display  block      margin  0 auto

User · Answer

If you want to set the image as the background  I ve got a solution    image       background-image  url yourimage jpg       background-position  center

User · Answer

Actually  the only problem with your code is that the text-align attribute applies to text  yes  images count as text  inside of the tag   You would want to put a span tag around the image and set its style to text-align  center  as so      x000D   x000D  span centerImage   x000D       text-align  center  x000D    x000D   lt span class  centerImage  gt  lt img src  http   placehold it 60 60    gt  lt  span gt  x000D   x000D   x000D    The image will be centered   In response to your question  it is the easiest and most foolproof way to center images  as long as you remember to apply the rule to the image s containing span  or div

User · Answer

One more way to scale - display it   img     width  60      Or required size of image       margin-left  20     Or scale it to move image       margin-right  20     It doesn t matters much if using left and width

User · Answer

To center an image with CSS  img      display  block      margin-left  auto      margin-right  auto     You can learn more here

User · Answer

img      display  block      margin-right  auto      margin-left  auto

User · Answer

display  block with margin  0 didn t work for me  neither wrapping with a text-align  center element   This is my solution   img center       position  absolute      transform  translateX -50        left  50       translateX is supported by most browsers

User · Answer

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    x000D   x000D  img center   x000D      display  block  x000D      margin  0 auto  x000D    x000D   lt div style  border  1px solid black   gt  x000D   lt img class  center  src   https   cdn sstatic net Sites stackoverflow company img logos so so-icon png v c78bd457575a  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

On the container holding image you can use a CSS nbsp 3 Flexbox to perfectly center the image inside  both vertically and horizontally   Let s assume you have  lt div class  container   as the image holder   Then as CSS you have to use    container       display  flex      align-items  center      justify-content  center      height  100       And this will make all your content inside this div perfectly centered

User · Answer

The simplest solution I found was to add this to my img-element   style  display block margin auto     It seems I don t need to add  0  before the  auto  as suggested by others  Maybe that is the proper way  but it works well enough for my purposes without the  0  as well  At least on latest Firefox  Chrome  and Edge

User · Answer

Sometimes we directly add the content and images on the WordPress administrator inside the pages  When we insert the images inside the content and want to align that center  Code is displayed as       lt p gt  lt img src  https   abcxyz com demo wp-content uploads 2018 04 1 jpg  alt    gt  lt  p gt      In that case you can add CSS content like this   article p img      margin  0 auto      display  block      text-align  center      float  none

User · Answer

I would use a div to center align an image  As in    lt div align  center  gt  lt img src  your image source   gt  lt  div gt

User · Answer

There are three methods for centering an element that I can suggest    Using the text-align property   x000D   x000D       parent   x000D      text-align  center  x000D    x000D       lt div class  parent  gt  x000D       lt img src  https   placehold it 60 60    gt  x000D   lt  div gt  x000D   x000D   x000D   Using the margin property   x000D   x000D  img   x000D      display  block  x000D      margin  0 auto  x000D    x000D   lt img src  https   placehold it 60 60    gt  x000D   x000D   x000D   Using the position property   x000D   x000D  img   x000D      display  block  x000D      position  relative  x000D      left  -50   x000D    x000D   parent   x000D      position  absolute  x000D      left  50   x000D    x000D   lt div class  parent  gt  x000D       lt img src  https   placehold it 60 60    gt  x000D   lt  div gt  x000D   x000D   x000D       The first and second methods only work if the parent is at least as wide as the image  When the image is wider than its parent  the image will not stay centered     But  The third method is a good way for that   Here s an example    x000D   x000D  img   x000D      display  block  x000D      position  relative  x000D      left  -50   x000D    x000D   parent   x000D      position  absolute  x000D      left  50   x000D    x000D   lt div class  parent  gt  x000D       lt img src  http   imgsv imaging nikon com lineup lens zoom normalzoom af-s dx 18-140mmf 35-56g ed vr img sample img 01 jpg    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can do    lt center gt  lt img src         gt  lt  center gt

User · Answer

To center a non background image depends on whether you want to display the image as an inline  default behavior  or a block element   Case of inline  If you want to keep the default behavior of the image s display CSS property  you will need to wrap your image inside another block element to which you must set text-align  center   Case of block  If you want to consider the image as a block element of its own  then text-align property does not make a sens  and you should do this instead   IMG display       display  block      margin-left  auto      margin-right  auto      The answer to your question      Is the property text-align  center  a good way to center an image   using CSS    Yes and no    Yes  if the image is the only element inside its wrapper  No  in case you have other elements inside the image s wrapper because all the children elements which are siblings of the image will inherit the text-align property  and may be you would not like this side effect    References   List of inline elements Centering things

[html] Center image using text-align center?

Examples related to html

Examples related to css