将这个div放在它的容器中心？

Question

  

在您尝试解决此问题之前，请仔细阅读我正在处理的限制。

约束

1. .pictureContainer需要保留position: relative（因为我的悬停菜单与其绝对相对。）

2. 图像可能小于#slide的80％，在这种情况下，它仍然必须在中心对齐。这转化为什么？你不能简单地做一个margin: 0 10%，因为是这会使这个特定情况居中，但它不会满足图像小于宽度#slide

   的80％的情况

                                                                       您好，我是位于另一个内联块元素旁边的内联块元素，是不是很棒？我觉得很棒！              

Answer 1

首先尝试打包div class="pictureContainer"并将css提供给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;
}

工作demo祝希望这个帮助

Answer 2

为什么不简单地添加：

text-align: center;

to pictureContainer css声明。它会将任何图像居中。

Answer 3

就像@jhunlio的回答一样：

使用follwong css

创建一个包装器

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

这里的技巧是宽度固定，边距设置为自动。

这意味着边缘（外部空间）将以固定宽度均匀分布在包装纸的两侧。因此它处于中间位置。