Question

我试图在内容的左侧和右侧有大量的空白空间。我尝试使用对齐，但在不同长度的内容上，它会产生问题。

问题：无论内容的长度如何，如何在内容的左侧和右侧添加均匀的空白空间？我绝对需要在内容的左侧添加15px填充。

参见代码：

<div class="pop">
    Over the weekend, I went to a sunset picnic on a rooftop in Brooklyn. 
    The evening couldn’t have been more picturesque — a group of stylish women
    chatting and lounging on blankets, framed against a lavender and glittering
    cityscape.
</div>

<div class="pop">
    This is just one sentence as an example.
</div>

CSS：

.pop {
    border: 1px solid #999;
    margin-top: 10px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: justify;
    padding-right: 15px;
}

http://jsfiddle.net/dbGeX/

更新：

我希望内容看起来不居中，但看起来它应该看起来在左侧和右侧有相同数量的填充。所以左边应该有左边的填充：15px;并且右侧的内容应调整为与左侧的内容相同。我希望这更清楚。

Answer 1

您可以使用width:80%;（将80替换为所需的值），结合min-width和max-width`属性来实现您的目标，同时保持您的布局。

如果您只希望内容居中，并且边框位于外部元素上，请参阅此JSFIDDLE ONE。

或者，如果您希望内容具有边框，请参阅此JSFIDDLE TWO。

希望这有一些帮助。

Answer 2

我在这里对你的意图进行了有根据的猜测，但也许你可能想要在你的“.pop”样式上使用display:inline-block。

Here's what I'm thinking you want.此处，容器的两侧都有相等的填充，无论其中包含的内容的长度如何。

如果我对你想要达到的目标错了，请告诉我，我会尽力帮助你！

无论内容的长度如何，我如何均匀定位内容？

2 个答案: