HTML 스팬 정렬 센터가 작동하지 않습니까?

107

HTML이 있습니다.

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Div가 내 문서의 간격을 변경하고 있으므로 대신 스팬을 사용하고 싶습니다.

그러나 스팬은 콘텐츠를 중앙 집중화하지 않습니다.

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

이 문제를 어떻게 해결합니까?

편집하다:

내 완전한 코드 :

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

html css

— 데이비드 19801
소스

1

귀하의 사업부는 "간격을 변경"하고 있습니까? 이것은 무엇을 의미합니까? 기본적으로 인라인 요소 인 반면 div는 블록 수준 요소 이기 때문에 스팬은 그렇지 않습니다 .

— Bojangles

안녕하세요 JamWaffles, "간격"이란 div가 콘텐츠 위와 아래에 공간을 추가한다는 의미입니다. 스팬은 이것을하지 않습니다.

— David19801 2011

Firebug 또는 Chrome 검사기를 사용하여 요소에 적용된 CSS 규칙을 확인하고 패딩 또는 여백을 추가하는 규칙을 찾습니다. 주변 요소에 패딩 / 여백이있을 수도 있습니다.

— Bojangles

5

text-align=center이어야합니다text-align:center

— n611x007 2012-08-26

197

div는 블록 요소이며 너비가 설정되지 않은 경우 컨테이너의 너비에 걸쳐 있습니다. 범위는 인라인 요소이며 그 안에 텍스트 너비가 있습니다. 현재 align을 CSS 속성으로 설정하려고합니다. 정렬은 속성입니다.

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

그러나 align 속성은 더 이상 사용되지 않습니다. text-align컨테이너 에서 CSS 속성을 사용해야합니다 .

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>

— 의지
소스

47

다음 스타일을 사용하십시오. margin:auto일반적으로 콘텐츠를 중앙 정렬하는 데 사용됩니다. 요소에 display:table필요span

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

— 크리스 J
소스

37

이 align속성은 더 이상 사용되지 않습니다. text-align대신 CSS 를 사용하십시오 . 또한, 기간은 사용하지 않는 텍스트를 중심으로하지 않습니다 display:block또는 display:inline-block폭의 값을 설정할 수 있지만 그것은 사업부 (블록 요소)와 같은 동작합니다.

레이아웃의 예를 게시 할 수 있습니까? www.jsfiddle.net 사용

— 루시퍼 샘
소스

잘 했어! 감사.

— dallinchase 2014

두 개의 인라인 요소를 인라인 요소를 유지하면서 다르게 정렬 할 수 없습니까?

— 다니엘 스프링

11

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

나를 위해 그것은 아주 잘 작동했습니다. 이것도 시도

— 목표
소스

2

다른 모든 설명 위에 "="콜론 대신 등호를 사용하고 있다고 생각합니다 ":".

<span style="border:1px solid red;text-align=center">

그것은해야한다:

<span style="border:1px solid red;text-align:center">

— Nhazean
소스

1

Span은 인라인 블록이며 인라인 컨텍스트에서 스타일을 지정하려는 대부분의 노력을 차단하는 끈기로 인라인 텍스트 크기에 맞게 조정됩니다. 레이아웃 스타일을 단순화 (충돌 제한)하려면 줄 바꿈을 사용하여 'p'태그에 div를 추가합니다.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

— 마크 스튜어트
소스

-7

word-wrap:break-word;CSS에서 사용 하십시오. 효과가있다.

— 월
소스