Position this div in the center of it's container?

问题

Before you attempt to solve this please carefully read the constraints I'm dealing with.

Constraints

.pictureContainer needs to remain position: relative (because I have a hover menu that positions absolutely relative to it.)
The image could be smaller than 80% of #slide in which case it still must align in the center. What this translates to? You can't simply do a margin: 0 10% because yes that would center this specific case, but it will not satisfy the case where the image is smaller than 80% of the width of #slide

Hello, I am inline-block element that is positioned beside another inline block element, isn't that wonderful? I think that is wonderful!

回答1:

Why not simply add:

text-align: center;

to pictureContainer css declaration. It will center any image in it.

回答2:

firts try to wrap your div class="pictureContainer" and give css to the wrapper html

<div class="wrapper">        
    <div class="pictureContainer">
                <img id="currentPic" class="slideShowPic" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg"  width="350" alt="IMAGE" />

                <div class="hoverMenu">
                    <a class="nextSlide" href="#">
                        >
                    </a>
                    <a class="prevSlide" href="#">
                        <
                    </a>
                </div>
          </div>
    </div>

css

.pictureContainer {
    width: 350px;
    position: relative;
    background: red;
    padding: 0;
    margin: 0;
}

#currentPic {
    vertical-align: top;
}
.wrapper {
    margin:auto;
    width: 350px;
}

working demo
hope this help

回答3:

Like the answer from @jhunlio suggests:

create a wrapper around it with the follwong css

.wrapper {
    margin:auto;
    width: 600px;
}

The trick here is that the width is fixed and the margin is set to auto.

It means that the margin (outer space) will be equally distributed at the sides of the wrapper with the fixed width. Hence it is in the middle.

来源：https://stackoverflow.com/questions/15376530/position-this-div-in-the-center-of-its-container

标签

html

css

css3

position