CSS. Проблема с отступами. Как лучше сделать?

Question

[Ulyana]

Необходимо сверстать блок вот так вот. Внутри текст на темном фоне.


У меня получилось сделать так:


Как видно, по бокам темный фон залазит. я никак не могу сделать отступы, так как использую абсолютное позиционирование. подскажите как исправить данную ситуацию??

вот код:

<div class="onePost">
                    	<div class="zag">
                    	<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                    	</div>
                        <img src="img/2.jpg" class="img-responsive center-block">
                    </div>

css:

.onePost {
                       background-color: white;
                       border: 1px solid #ccc;
                       padding: 7px;
                       position: relative;
        }
        .zag {
			position: absolute;
			top: 50%;
			margin-top: -3%;
			left: 50%; 
			margin-left: -50%;
			width: 100%;
			height: auto;
			padding: 30px;
			background-color: rgba(0,0,0,.7);
        }
        .zag p {
        	        font-size: 24px;
        	        font-weight: 600;
        	        color: rgba(255,255,255,.7);
        }

Answer 1

[Кирилл]

Для .zag задайте border-left и border-right равным паддингам .onePost и таким же цветом.

Comments

[Ulyana]

я уже начала заливать на jsfiddle, а вы мне ответили.
большое спасибо)) отличный беспалевный вариант!

Answer 2

[Максим Кожин]

Можно в div.zag добавить еще один div.zag-img и дать ему margin: 7px 0 на полную высоту, внутри которого и разместить параграф

<div class="onePost">
  <div class="zag">
    <div class="zag-img">
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </div>
  </div>
  <img src="img/2.jpg" class="img-responsive center-block">
</div>

.zag-img {
  margin: 0 7px;
  height: 100%
}

Answer 3

[Андрей]

Вариант уменьшить длину блока подойдет?
https://jsfiddle.net/cunemm8L/

Comments

[Ulyana]

нет, мне надо чтоб оно идеально ложилась к краям картинки. не знаю как это сделать

[Ulyana]

phpuser: я кинула код сюда. лень регаться на jsfiddle.

[Кирилл]

horosami: на jsfiddle не обязательно регаться, во первых. И во вторых - вы просите помощи и вам лень пройти 10 секундную регистрацию?

[Ulyana]

phpuser: все ок)) мне уже ответили. вы правы. лучше заливать на jsfiddle