Как равномерно расположить контент независимо от длины контента?

Question

Я пытаюсь иметь одинаковое количество свободного места слева и справа от содержимого. Я пытался использовать justify, но на разной длине содержимого это создает проблемы.

Вопрос: Как добавить одинаковое количество пустого пространства слева и справа от содержимого независимо от длины содержимого? Мне определенно нужно добавить 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

Я делаю обоснованное предположение о ваших намерениях здесь, но, возможно, вы можете использовать display:inline-block на ваш стиль ".pop".

Вот то, что я думаю, ты хочешь. Здесь с обеих сторон контейнера имеется одинаковое заполнение независимо от длины содержимого, содержащегося внутри.

Если я ошибаюсь в том, чего вы пытаетесь достичь, пожалуйста, дайте мне знать, и я постараюсь помочь вам в дальнейшем!

Answer 2

Ты можешь использовать width:80%; (заменить 80 с желаемым значением), в сочетании с min-width и свойства max-width` для достижения того, что вы хотите, в то же время поддерживая ваш макет.

Если вы хотите, чтобы только контент был центрирован, а граница находилась на внешнем элементе, посмотрите это JSFIDDLE ONE.

Или, если вы хотите, чтобы контент имел границу, см. JSFIDDLE TWO.

Надеюсь, что это помогло.