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

Program / 글쓴이

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>

답변

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>

답변

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

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

답변

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

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

답변

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

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

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

답변

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

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

그것은해야한다:

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

답변

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

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

답변

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