html - 将此 div 放置在其容器的中心？

Question

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

约束

1. .pictureContainer需要保留position: relative（因为我有一个绝对相对于它定位的悬停菜单。）

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

   您好，我是位于另一个 inline 块元素旁边的 inline-block 元素，这不是很好吗？我认为那太棒了！

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;
}

工作演示
希望这有帮助

Answer 2

为什么不简单地添加：

text-align: center;

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

Answer 3

就像@jhunlio 的回答所暗示的那样：

使用 follwong css 在它周围创建一个包装器

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

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

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