정렬 된 목록 번호를 HTML 가운데 가운데에 정렬하는 방법

현재 HTML 프로그래밍을 배우고 있습니다.정렬 된 목록 번호를 HTML 가운데 가운데에 정렬하는 방법

이 경우 내가 같이 넣어 :

<html> 
<body align="middle"> 
HEADLINE 
<ol> 
<li>First Item</li> 
</ol> 
</body> 
</html>

문제는 내가 그 제목 아래에 정렬하고 싶어 할 때 수 (1)가 왼쪽에있다 나는 문제가있다. 어떻게 전체 목록 항목을 중간에 가져올 수 있습니까? 몸에 ALIGNING

출처

2013-10-14 Nikolas

당신은 당신이 원하는 것을 정확하게 보여줄 수있는 사진을 가지고 있습니까? –

css에 대해 잘 알고 있습니까? 'ol li {text-align : center; 너비 : 300px; }'예 : –

이것은 HTML이 아닌 CSS의 작업처럼 들립니다. –

당신은 정렬되어 텍스트 :

는 내가 다른 웹 사이트에 대한 링크를 제공 할 수 있습니다, 그래서 당신은 사진을 볼 수 있도록 사진을 추가 할이어야 10 평판이 필요합니다.

이 시도 :

.center { 
 
    text-align: center; 
 
    list-style-position: inside; 
 
}

<h4 align="center">HEADLINE</h4> 
 
<ol class="center"> 
 
    <li>First Item</li> 
 
</ol>

출처

2013-10-14 16:58:38

이것이 저에게 효과적이었습니다. 왜 제가 시도한 것처럼 별도의 CSS 파일에서 작동하지 않았습니까? – Nikolas

독자에게 -이 열쇠는'list-style-position : inside;'입니다. 브라우저는 목록 마커 (이 경우 숫자)를 텍스트와 함께 인라인으로 렌더링하도록 고려하므로'text-align'의 영향을받을 수 있습니다. – Beejamin

다음과 같이

니콜라스는, CSS의 정렬 된 목록에서 숫자를 정렬하는 것입니다 :

 ol 
    { 
     display: inline-block; 
     margin-left: auto; 
     margin-right: auto; 
    }

** 당신은 디스플레이 -를 사용해야합니다 차단하려면 목록에 숫자를 가운데 놓기 위해 목록에 상자를 넣어야하기 때문입니다.

출처

2015-09-23 16:21:07 Halie

Nuno Duarte의 답변에 더하여 목록 번호 뒤에 공백을 추가하면 중심 모드에서 더 잘 보이게됩니다. (면책 조항 : 브라우저에서 테스트되지 않음)

.text-center { 
 
    text-align: center; 
 
} 
 
ol.text-center { 
 
    list-style-position: inside; 
 
    padding-left: inherit; /*Get rid of padding to center correctly*/ 
 
} 
 
    ol.text-center > li::before { 
 
     content: "\A"; 
 
     white-space: pre; 
 
    }

<h4 class="text-center">HEADLINE</h4> 
 
<ol class="text-center"> 
 
    <li>First Item</li> 
 
</ol>

출처

2018-03-05 10:29:08 Godsayah

정렬 된 목록 번호를 HTML 가운데 가운데에 정렬하는 방법

답변

관련 문제