CODEWITHSUNDEEP
csswordpress
Laura
Laura

Reputation: 99

CSS for aligning image in the center

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!

Upvotes: 6

Views: 8220

Answers (6)

theaminuli
theaminuli

Reputation: 126

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

Upvotes: 0

jkgaddis
jkgaddis

Reputation: 121

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.

Upvotes: 0

Rohit416
Rohit416

Reputation: 3486

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.

Upvotes: 1

Ionut Necula
Ionut Necula

Reputation: 11472

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

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

Upvotes: 0

shrinivas patil
shrinivas patil

Reputation: 1

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

Upvotes: 0

Mike Smith
Mike Smith

Reputation: 107

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

Upvotes: 1

Related Questions