how to align images horizontally centered

Question

On this page, there are some staff photos.

On an iPad in portrait mode, the staff photos are cut off on the right hand side.

I don't mind them being cut off, but I'd like them aligned center, instead of aligned left.

Note, I want the image dimensions to be the same, just the alignment shifted to the left to become centered, so that faces show in the middle of the image boundaries.

I've tried the following solutions from this question:

.ult-ib-effect-style13.ult-ib2-min-height img {
    display:block;
    margin:auto;
}

and

.ult-ib-effect-style13.ult-ib2-min-height {
    text-align: center; 
}

and

.ult-ib-effect-style13.ult-ib2-min-height {
    display: flex;
    justify-content: center;
}

but none of these are working.

Questions seeking help ("**why isn't, or how to make, this code working?**") must include the desired behavior, a _specific problem or error and the shortest code necessary_ to reproduce it **in the question itself**. Questions without **a clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Asons, May 16 '17 at 14:43

Pierre Burton · Answer 1 · 2017-05-22T12:34:22.723

First of all, I checked your css and it's a complete mess ! You defenitly should rework it off a bit. All those !important statements are terribly wrong practice.

However, I tweaked up a bit your img styles and found out a solution that fits your needs.

The trick was to override all the other width and height styles that applied to your images and simply replace it by a style which only set size of images based on heigth of container. This solution prevent your images from being distorted.

I also reset the translate3d style so the images are centered in container.

.ult-ib-effect-style13.ult-ib2-min-height img {
    min-width: auto!important;
    width: auto!important;
    max-width: none!important;
    height: 100%!important;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Result:

Edit :

Result @ width: 900px

It's still good, images are centered and no distortion. However, you could make your divs wider at this breakpoint for a more elegant overall result.

See below for example : Set the column (.col-sm-3) at 50% width and img to heigth: 120%; max-heigth: none;

EDIT:

As said in comment, try to put the <link> tag of your own css in the end of your <head> after all the other stylesheet your site loads.

This will cause your css to be rendered last and your styles to override the previous ones. Then try changing back your rules to those proposed in the explanation above. This should do the trick.

Thanks Pierre. The solution does not seem to work when the viewport is 900px wide, which is the critical situation. Can you have a look at your solution with viewport width 900px please? — Steve, May 19 '17 at 03:10
Thanks. I have your code @ line 178 of http://www.rossnorthhomes.com.au/wp-content/themes/houzez-child/style.css, but I [see this](https://imgur.com/a/Iqpxo). Browser is Chrome on Windows 10. — Steve, May 19 '17 at 07:51
Okay my bad. The css file I edited is the "ultimate.min.css" which is the css of an add-on you're using. Problem is, this file is loaded AFTER yours and its "!important" statements are making this a dreadfull mess. You should first try to load your css last, then apply the same kind of tweaks we used before to achieve the disered result. — Pierre Burton, May 19 '17 at 07:59

score 1 · Answer 2 · answered May 16 '17 at 03:33

1

for image you can use:

img {
    display: block;
    margin: auto;
    width: 100%;
}

or you can use Bootstrap

then assign class "img-responsive center-block"

answered May 16 '17 at 03:33

Oleg Markoff

321
2
7

Thanks Oleg. The images appear stretched vertically now. – Steve May 16 '17 at 03:56
(on [this page](http://www.rossnorthhomes.com.au/why-ross-north/) in iPad portrait mode) – Steve May 16 '17 at 04:10
I can't mark your answer as solving the problem if the vertical height is stretched now. – Steve May 16 '17 at 04:26
remove width:100% – Oleg Markoff May 16 '17 at 04:34
`width: 100%;` is not being applied. `width: auto;` is. – Steve May 16 '17 at 04:56

score 1 · Answer 3 · answered May 23 '17 at 15:07

I know some of the solutions may work, but there's more to your problems. Its bad practice to insert an inline height or width. Plus you must know the exact size of your image, before you use it. Using image holders help with that. You used the height attribute to make your image smaller. If your image does not fit the container, then you'll always have problems that's why you must always know the exact height and width of the images that your going to use. It also help with performance. On Smaller Screens, there's more issues with your images. The right side is black out simply because of the size of the picture. With responsive design, you want your images to be more square then rectangle, even if its not perfect. The css is a mess, and you are using useless attributes and style properties and values. Simply resize the pictures with a similar width and height of the container (col-sm-3) and then use bootstrap "img-responsive" class and all will be fine.

score 0 · Answer 4 · answered May 19 '17 at 06:08

If your concern is only ipad portrait mode and browsers like chrome, safari or firefox, then use object-position.

object-position: center center;
object-fit:cover;

If you need support in IE or Edge then it wont work in that.

You can mention any position you want, 'center center' is 50% from left and 50% from top.

Kindly clean your code a bit, there are lot of important overrides.

score 0 · Answer 5 · answered May 19 '17 at 06:14

0

Just add following CSS

@media (max-width:1024px) {
.ult-ib-effect-style13.ult-ib2-min-height img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}
.ult-new-ib {
    max-height: 330px;
}
}

answered May 19 '17 at 06:14

Super User

9,448
3
31
47

Thanks. I [see this](https://imgur.com/a/kicJo) when I add your CSS to http://www.rossnorthhomes.com.au/wp-content/themes/houzez-child/style.css. My browser is Chrome on Windows 10. – Steve May 19 '17 at 07:57

score 0 · Answer 6 · answered May 23 '17 at 10:25

You have this css code for images

.ult-ib-effect-style13.ult-ib2-min-height img {
    width: auto!important;
    max-width: none!important;
    height: 100%;
}

Add also this three lines

position: relative;
left: 50%;
transform: translate(-50%, 0);

And You Win))

breakit · Accepted Answer · 2017-05-24T23:27:01.863

0

Sorry I understood it wrong. So basically you want to center your oversized image in small div. So your parent div (Image Parent) is positioned relatively. First of all you don't need lot of css you have written for your image class. Remove all of that from 'ult-ib-effect-style13.ult-ib2-min-height img' class.Now your code will look like

.ult-ib-effect-style13.ult-ib2-min-height img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 100%;
}

Even if you not going to remove your css from image class this will work for all screen widths! Possible duplicate of this question.You can also position your image relatively in case of absolute parent. Don't forget to use transform, moz-transform for cross browser compatibility as mentioned in link.

edited May 24 '17 at 23:27

answered May 24 '17 at 09:39

breakit

356
2
8

For maintaining aspect ratio you have to add this line also – breakit May 24 '17 at 23:30
max-width:none; – breakit May 24 '17 at 23:30
@Steve Have you checked it? – breakit May 25 '17 at 14:35
Thanks so much @breakit, that fixed it. I ended up setting `top: 85%;`. – Steve May 26 '17 at 07:20

score -1 · Answer 8 · answered May 24 '17 at 12:49

-1

Just add following css:

.ult-ib-effect-style13.ult-ib2-min-height img {
    left: 50%;
    transform: translateX(-50%);
}

answered May 24 '17 at 12:49

Gabriel Bica

121
2

how to align images horizontally centered

8 Answers8

Result:

Edit :

EDIT: