Centering image within div using css

Question

I'm using JSSOR image gallery and currently it is stretching portrait images.

I have made a css class where it is no longer stretching:

However I can't get the imace centered in the div.

<div>
    <div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg">&nbsp;</div>
    <div u="thumb"></div>
</div>

Here is the CSS?

.portrait {
position: relative;
width: 850px; 
height: 565px;
background-repeat: no-repeat;
text-align: center;
}

How can I get the image centered?

text-align applies to children of the div. the background is not a child. — Marc B
– Marc B, Commented Oct 5, 2015 at 15:01
Why are you not using an <img> tag? Using CSS to display images for a carousel/slideshow seems wrong to me. — hungerstar
– hungerstar, Commented Oct 5, 2015 at 15:04

Zander · Accepted Answer · 2015-10-05 15:28:13Z

2

You are using an image as a background from a div.

Almost any element has an attribute called: background-position which can take center as value to center the image given into the middle from the element.

so it could be something like:

.portrait {
    ...
    background-position: center;
}

edited Oct 5, 2015 at 15:28

answered Oct 5, 2015 at 15:22

Zander

1,0861 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Berendschot · Accepted Answer · 2015-10-05 15:08:20Z

1

Using the following code in your CSS should work:

background-position: center;

answered Oct 5, 2015 at 15:08

Berendschot

3,1232 gold badges24 silver badges45 bronze badges

1 Comment

Rob Over a year ago

You should explain why.

David Stančík · Accepted Answer · 2015-10-05 15:17:11Z

1

I think of two possible ways....

div {background-position: center;}
div {margin-left:auto; margin-right:auto;}

answered Oct 5, 2015 at 15:17

David Stančík

3507 silver badges23 bronze badges

Collectives™ on Stack Overflow

Centering image within div using css

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related