콘텐츠의 길이에 관계없이 콘텐츠를 균등하게 배치하는 방법은 무엇입니까?

콘텐츠의 왼쪽과 오른쪽에 균등 한 양의 빈 공간이 있어야합니다. 나는 정당화를 사용하여 시도했지만 다른 길이의 내용에 문제가 발생했습니다.콘텐츠의 길이에 관계없이 콘텐츠를 균등하게 배치하는 방법은 무엇입니까?

질문 : 콘텐츠의 길이에 관계없이 콘텐츠의 왼쪽과 오른쪽에 공백을 어떻게 추가합니까? 콘텐츠의 왼쪽에 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; 오른쪽의 내용은 왼쪽과 동일한 공백을 갖도록 조정해야합니다. 이게 더 명확 해지기를 바랍니다.

출처

2013-06-25 starbucks

예를 들어 기술적으로 두 번째 div의 가운데 정렬을 원하십니까? 첫 번째 div의 왼쪽 및 오른쪽 패딩은 두 번째 div의 왼쪽 및 오른쪽 패딩과 같습니다. –

이 마음에 드십니까? http://jsfiddle.net/dbGeX/1/ – Aravind

아니요, 내용의 길이에 관계없이 항상 15px 왼쪽으로 채워야하지만 긴 텍스트의 경우에는 겉으로 보일 것입니다. – starbucks

width:80%; (원하는 값으로 80 대체), min-width 및 최대 너비 속성을 조합하여 레이아웃을 유지하면서 원하는 것을 얻을 수 있습니다.

콘텐츠의 가운데 맞춤을 지정하고 테두리를 외부 요소로 지정하려면 JSFIDDLE ONE을 참조하십시오.

콘텐츠에 테두리가 표시되도록하려면 JSFIDDLE TWO을 참조하십시오.

희망 사항이 도움이 되었기를 바랍니다.

출처

2013-06-25 18:09:25 rktcool

나는 여기에 의도 된대로 추측하고 있지만 아마도 ".pop"의 스타일에 display:inline-block을 사용하고 싶을 것입니다.

Here's what I'm thinking you want. 여기에 포함 된 내용의 길이에 관계없이 컨테이너의 양쪽에 동일한 패딩이 있습니다.

내가 달성하려는 내용이 잘못 되었다면 알려 주시면 자세히 알려 드리겠습니다.

출처

2013-06-25 21:04:28 Serlite

콘텐츠의 길이에 관계없이 콘텐츠를 균등하게 배치하는 방법은 무엇입니까?

답변

관련 문제