CSS : 중앙 블록이지만 내용을 왼쪽에 정렬
전체 블록이 부모의 중앙에 배치되기를 원하지만 블록의 내용은 왼쪽 정렬됩니다.
예가 가장 좋습니다
이 페이지에서 :
ascii 아트는 중앙에 있어야하지만 (표시된대로) "YAML"처럼 정렬되어야합니다.
아니면 이거 :
오류 메시지는 콘솔 에서처럼 모두 정렬되어야합니다.
먼저 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>다른 질문에서 작업 답변을 다시 게시하십시오 : 가변 너비의 부동 요소를 수평으로 중앙에 배치하는 방법?
플로팅되고 중앙에 배치 될 요소가 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 에 관한 좋은 참조입니다.
내가 당신을 잘 이해한다면, 당신은 컨테이너 (또는 블록)를 센터링하기 위해 사용해야합니다
margin-left: auto;
margin-right: auto;
왼쪽 정렬은 내용입니다.
text-align: left;
Normally you should use margin: 0 auto on the div as mentioned in the other answers, but you'll have to specify a width for the div. If you don't want to specify a width you could either (this is depending on what you're trying to do) use margins, something like margin: 0 200px; , this should make your content seems as if it's centered, you could also see the answer of Leyu to my question
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Is this what you are looking for? 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>I've found the easiest way to centre and left-align text inside a container is the following:
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
}
Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution.
THIS works
<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>
참고URL : https://stackoverflow.com/questions/1269589/css-center-block-but-align-contents-to-the-left
'Development Tip' 카테고리의 다른 글
| 파이썬에서 사전 항목을 함수 인수로 전달하는 방법은 무엇입니까? (0) | 2020.11.26 |
|---|---|
| Pandas DataFrame에서 열 중첩을 해제 (폭파)하는 방법은 무엇입니까? (0) | 2020.11.26 |
| std :: string 설정 여부를 확인하는 방법은 무엇입니까? (0) | 2020.11.26 |
| MySQL 결과가 PHP에서 반환되었는지 확인하는 가장 좋은 방법은 무엇입니까? (0) | 2020.11.26 |
| 두 필드 값으로 PHP 정렬 배열 (0) | 2020.11.26 |