6

I have an image placed in a widget on my WordPress blog. I want the image to be centered since it's smaller than the sidebar it is placed in.

I currently use 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 aligns left.

What am I doing wrong?

Many thanks!

Laura
  • 99
  • 1
  • 2
  • 14
  • 2
    [It is probably something else that is causing the issue](http://jsfiddle.net/ummwk84q/) – potashin Oct 28 '15 at 09:51
  • are there any `text-align:left` or `float:left` that might be affecting it – Sam Willis Oct 28 '15 at 09:52
  • I don't use WordPress, but check that image does not inherits `float:left` from another rule previously defined. – Luca Detomi Oct 28 '15 at 09:53
  • Post a link to the webpage with the problem that you're having. – Ionut Necula Oct 28 '15 at 09:54
  • The (non)working example would be greatly appreciated as Ionut mentioned, on itself, the css should work, as demonstrated by potashin's fiddle. Things that could be interfering are inherited stylings or global css, both of these are very easy to check if we have a working example – DrunkWolf Oct 28 '15 at 09:58
  • Here's one of the links where it's not working, but it's basically the same on every other post page - travelersuniverse.com/places-to-visit-in-japan-for-animal-lovers. – Laura Oct 28 '15 at 10:03
  • Hey, @Laura, I posted an answer. Is that helpful ?! – Ionut Necula Oct 28 '15 at 10:10
  • @Laura accept/mark the answer correct which solved your issue by clicking on right symbol. – ketan Feb 18 '16 at 11:35

6 Answers6

1

Try margin: 0 auto instead of declaring them separately. Also you can try adding text-align: center to to it's container or parent div

Mike Smith
  • 107
  • 1
  • 1
  • 11
1

Because everybody has added the answers using something similar. I decided to share this with everyone. You can use this solution for image in center for both x (horizontal) and y (vertical) axis because that is what question title says. This relays on flexbox.

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

Using 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!! */
}

Here is the DEMO of above approach.

If you want to center only horizontally using flexbox just omit styles for img and set the following.

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

Notice i have changed flex-direction property from column to row which is default. If you do not specify it will still work. Setting it to column will make it center vertically.

There are some things that should be kept in mind with while working with flexbox.

  • flexbox is not supported in older IE versions i.e. IE < 11 and has limited support for IE-10.
  • The parent container (#imgBox in this case) should have some height and width otherwise the image will not center in one of the axis. This is also required for margin: 0 auto to work i.e. without some having width (not in percentage), the margin: 0 auto property will not work in CSS.

Alternative approach:

If you do want to rely on flexbox then it is again not much difficult. Images are inline in nature on web pages but they still can have width and height so they can be centered horizontally using text-align property i.e. using the above example...

#imageBox 
{
    text-align: center;
}

However it will not center the img vertically. Vertical-align alone will not center the image vertically in this case. For that you can check this post here. It is nicely explained there.

You can also use display: table and display: table-cell and apply text-align: center and vertical-align: middle on table-cell to center the content on both axis but i would not recommend these unless really necessary.

Community
  • 1
  • 1
Rohit416
  • 3,416
  • 3
  • 24
  • 41
0

I will give you two solutions

  1. you must give parent div tag width:as required, i.e 75 % to 100%. Write css for img tag: margin-left:250px or more.

  2. add below css for image position relative; margin-left: 250px or more;

Good luck

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
shrinivas patil
  • 1
0

Use text-align: center; on your div that is containing the image:

.siteorigin-widget-tinymce.textwidget{
  text-align: center;
}
Ionut Necula
  • 11,107
  • 4
  • 45
  • 69
0

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

<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 stylings for the registered thumb-nail sized image. If you start adding CSS rules for individual images, you tend to mess up the consistency of style for the whole site.

jkgaddis
  • 121
  • 3
0

enter image description here

<div id="imageBoxColor">
  <img src="./car.jpg" alt="some text" />
</div>

      #imageBoxColor{
     height: 100vh;
     background-color: rgb(198, 203, 202);
     display: flex;
     justify-content: center;
     align-items: center;
  }

  #imageBoxColor img{
     width: 400px;
     height: 400px;   
  }

Follow this code to align the image center. I hope your problem is solved

theaminuldev
  • 109
  • 8