CSS : 중앙 블록이지만 내용을 왼쪽에 정렬

81

전체 블록이 부모의 중앙에 배치되기를 원하지만 블록의 내용은 왼쪽 정렬됩니다.

예가 가장 좋습니다

이 페이지에서 :

http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c% 2f % 7c % 7c % 0d % 0a ++ % 2f % 2f + % 7c % 7c ++ % 7c % 7c __ % 0d % 0a & type = python

ascii 아트는 중앙에 있어야하지만 (표시된대로) "YAML"처럼 정렬되어야합니다.

아니면 이거 :

http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23 % 0d % 0a % 0d % 0a % 3f + % 5b + New + York + Yankees % 2c % 0d % 0a ++++ Atlanta + Braves + % 5d % 0d % 0a % 3a + % 5b + 2001-07-02 % 2c + 2001-08-12 % 2c % 0d % 0a ++++ 2001-08-14 + % 5d % 0d % 0a

오류 메시지는 콘솔 에서처럼 모두 정렬되어야합니다.

css  alignment  center 
— 폴 타르 잔
소스

답변:

163

먼저 div자식 콘텐츠를 text-align: center. 다음으로, 자식 의 너비에 맞게 조정하고 보유한 콘텐츠를 원하는대로 왼쪽에 정렬 div하는 데 사용 하는 자식 을 만듭니다 .display: inline-blocktext-align: left

<div style="text-align: center;">
    <div style="display: inline-block; text-align: left;">
        Centered<br />
        Content<br />
        That<br />
        Is<br />
        Left<br />
        Aligned
    </div>
</div>
스 니펫 확장

— Keavon
소스
5
명확하고 효과적입니다. 감사합니다!
— fuzzybear3965
11
한 줄의 텍스트가 한 줄에 맞지 않는 즉시 텍스트를 감싸고 블록이 전체 너비가되지만 텍스트가 전체 너비보다 작기 때문에 작동하지 않으므로 블록이 가운데에 있더라도 작동하지 않습니다. 텍스트가 포함 블록의 전체 너비가 아니기 때문에 중요하지 않습니다. 예는 stackoverflow.com/questions/8702802/…의
— user3338098
간단하고 아름다운! 감사합니다
— Cesar Bielich 2010 년
3
@ user3338098 작동합니다. 귀하의 경우 텍스트의 최대 너비를 설정하여 블록이 원하지 않는 크기로 확장되는 것을 막아야합니다. 나는 말 그대로이 똑같은 논리를 내 작업에 적용했고 다이어그램 1b + 2b를 얻을 수있었습니다.
— Mark
20

다른 질문에서 작업 답변을 다시 게시하십시오 : 가변 너비의 부동 요소를 수평으로 중앙에 배치하는 방법?

플로팅되고 중앙에 배치 될 요소가 id = "content"인 div라고 가정합니다. ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

그리고 다음 CSS를 적용하십시오

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

다음은 http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats 에 대한 좋은 참조입니다.

— 폴 타르 잔
소스
또한 "wrap"존재 pre와 "content" 와도 잘 작동합니다 code.
— Serge Stroobandt 2015
This will be centered한 줄에 맞지 않는 즉시 텍스트를 감싸고 블록이 전체 너비이지만 텍스트가 전체 너비보다 작기 때문에 작동하지 않으므로 블록이 가운데에 있더라도 중요하지 않습니다. 텍스트는 포함 블록의 전체 너비가 아닙니다. 예를 들어 stackoverflow.com/questions/8702802/…의 다이어그램 2a를 참조하십시오 .
— user3338098
음수 값을 사용하지 마십시오! 모든 브라우저에서 제대로 작동하지 않습니다.
— Grasper 2018
4

내가 당신을 잘 이해한다면, 당신은 컨테이너 (또는 블록)를 센터링하기 위해 사용해야합니다

margin-left: auto;
margin-right: auto;

왼쪽 정렬은 내용입니다.

text-align: left;
— eKek0
소스
그래서, <pre>와 <code>에 무엇을 넣어야하나요? 나는 그것에 대한 변형을 시도했지만 실패했습니다.
— Paul Tarjan
CSS 클래스를 사용해 보셨습니까?
— eKek0
또한, 당신은 사전>에 대한 컨테이너 사업부를 사용할 수 있습니다>
— eKek0
2
나는 컨테이너 div를 시도하고 있는데 그것이 작동하도록 만드는 유일한 방법은 고정 너비 (내가 원하지 않는)를 사용하는 것입니다.
— Paul Tarjan
2

일반적으로 다른 답변에서 언급했듯이 div에서 margin : 0 auto를 사용해야하지만 div의 너비를 지정해야합니다. 너비를 지정하고 싶지 않다면 여백을 사용할 수도 있습니다. (이것은 당신이하려는 것에 따라 다릅니다) margin : 0 200px; , 이렇게하면 콘텐츠가 중앙에있는 것처럼 보일 것입니다. 내 질문에 대한 Leyu의 답변도 볼 수 있습니다.

— 웨 일드 아 이사
소스
슬프게도 솔루션은 강제 가로 스크롤 막대로 오버플로를 만듭니다. 오버플로 추가 : 부모 요소에 숨김을 추가하는 것은 내 출력이 스크롤 막대를 보증하기에 충분히 길 수 있기 때문에 좋지 않습니다. 죄송합니다 :(
— 폴 Tarjan
실제로 내가 언급 한 내 솔루션은 아니지만 어쨌든 오버플로가 의미하는 바를 이해하지 못합니다. 숨겨진 강제 스크롤바, 스크롤바를 강제하지 않고 내용을 숨겨야합니다.
— Waleed Eissa
게시물의 솔루션은 콘텐츠가 실제로 오른쪽으로 50 % 이동하기 때문에 가로 스크롤바를 발생시킵니다. 이것은 나를 위해 작동하지 않는 제거하려면 overflow : hidden이 필요합니다.
— Paul Tarjan
2

컨테이너 내부에서 텍스트를 중앙 및 왼쪽 정렬하는 가장 쉬운 방법은 다음과 같습니다.

HTML :

<div>
  <p>Some interesting text.</p>
</div>

CSS :

P {
  width: 50%; //or whatever looks best
  margin: auto; //top and bottom margin can be added for aesthetic effect
}

이 기본 솔루션을 알아내는 데 꽤 많은 시간이 걸렸기 때문에 이것이 당신이 찾고 있던 것이기를 바랍니다.

— L.Gaunt
소스
1 
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
— 호박색
소스
또한 너비 : 400px를 원하지 않습니다. 그것 없이는 가능합니까?
— Paul Tarjan
문제는 블록 수준 요소가 제한을 두지 않는 한 가능한 최대 너비를 채우기 위해 확장된다는 것입니다.
— Amber
그래서 내가하고 싶은 게 불가능 해?
— Paul Tarjan
누군가 내가 알지 못하는 비밀을 알고있을 수도 있지만, 내가 아는 바는 그렇습니다.
— Amber
나는 Dav에 동의합니다. 아마도 표준 HTML 텍스트 영역보다 더 많은 사용자 정의를 허용하는 tinyMCE 또는 다른 서식있는 텍스트 편집기를 살펴볼 수 있습니다. 불행히도, 당신은 hackish 결과와 함께 많은 시간을 보낼 수 있습니다. 그래도 행운을 빕니다!
— mkelley33 2009-08-13
1

이것이 당신이 찾고있는 것입니까? Flexbox ...

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.inside{
  height:100px;
  width:100px;
  background:gray;
  border:1px solid;
}
<section class="container">
  <section class="inside">
    A
  </section>
  <section class="inside">
    B
  </section>
  <section class="inside">
    C
  </section>
</section>
스 니펫 확장

— 로니 로이스 톤
소스
-1

이 작품

<div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>
— 사용자 7212232
소스
3
코드와 장단점을 설명해 주시겠습니까? 그렇게하면 다른 사람들이 완전히 이해할 수도 있고 이해하지 못할 수도있는 것을 복사하여 붙여 넣는 대신 학습 할 수 있습니다.
— 로버트
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.