CSS to center the image

Question

I have an image posted in widgets on my WordPress blog. I want the image to be centered, as it is smaller than the sidebar in which it is placed.

I am currently using the following code:

<img style="display: block; margin-left: auto; margin-right: auto; padding-bottom: 10px; width: 150px; height: 155px;" src="path">

But the image is aligned to the left.

What am I doing wrong?

Many thanks!

Answer 1

Try margin: 0 autodeclaring them separately instead. You can also try adding text-align: centerto this container or parent div

Answer 2

I will give you two solutions

• div: , .. 75% 100%. css img: margin-left:250px .

• css position relative; margin-left: 250px ;

.

Answer 3

text-align: center; div, :

.siteorigin-widget-tinymce.textwidget{
  text-align: center;
}

Hide result

Answer 4

, - . . x (horizontal), y (vertical) axis , , . flexbox.

<div id="imageBox">
  <img src="my-image.png" alt="some text" />
</div>

flexbox

#imageBox
{
    display:flex;
    flex-direction:column;
    justify-content:center; 
    width: 400px;
    height: 400px;
}

#imageBox img
{
    margin: 0 auto;  /* this is where magic will happen!! */
}

DEMO .

, flexbox, img .

#imageBox
{
    display: flex;
    flex-direction: row;  /* changed from column to row  */
    justify-content: center;
}

, flex-direction column row, . , . column .

, flexbox.

• flexbox IE, IE < 11 IE-10.
• (#imgBox ) , . : 0 auto , .. width ( ), margin: 0 auto CSS.

:

flexbox, . inline -, width height, , text-align, ...

#imageBox 
{
    text-align: center;
}

img . Vertical-align . . .

display: table display: table-cell text-align: center vertical-align: middle table-cell , , .

Answer 5

Assuming you have the correct CSS-specific CSS in your child theme, try the following:

<img src="path_to_image_copied_from_media_library" alt="an_alt_label" width="150" height="150" class="aligncenter size-thumbnail" />

size-thumbnail allows you to use the default styles for the registered thumbnail size. If you start adding CSS rules for individual images, you tend to ruin the style consistency for the entire site.