css - 如何让 div 向左和向右扩展？

Question

我有一个最小和最大宽度的 div。

CSS

#box{
    position: absolute;
    top: 50px;
    left: 100px;
    min-width: 180px;
    max-width: 320px;
    height: 180px;
    border: 1px solid black;
    overflow: hidden;
}

http://jsfiddle.net/5QdFS/

当我在框中输入长内容时，它会向右扩展。是否可以让盒子左右均匀展开？

Answer 1

您可以使用这样的容器text-align:center;：

HTML

<div class="container">
    <div id="photo"></div>
</div>

CSS

.container{
    text-align: center;    
}
#photo{
    min-width: 180px;
    max-width: 320px;
    height: 180px;
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    margin-top: 50px;
}

示例小提琴

Answer 2

您已将左侧值设置为 100 像素，这无法让您左右均匀扩展。

编辑

如果你不需要绝对位置，那么你可以通过设置margin: 0 auto;和display: table;到你的 div 来做到这一点。

演示