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

<强> Example fiddle

Answer 2

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

修改

如果您不需要绝对位置，则可以通过将margin: 0 auto;和display: table;设置为div来实现此目的。

Demo

如何将div扩展为左右？

2 个答案: