어떤 이유로 텍스트가 중앙 정렬되지 않습니다. 그것은 조금 왼쪽에 있습니다. 내가 텍스트 정렬을 할 때조차도, 그것은 꼭해야만하는 곳으로 가지 않습니다. 여기 내 HTML 파일입니다 :텍스트가 중앙에 정렬되지 않습니다.

<html> 
<head> 
    <title>foo</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="icon" type="image/x-icon" href="images/favicon.png" /> 
    <link rel="icon" type="image/png" href="images/favicon.png" /> 
    <link rel="icon" type="image/gif" href="images/favicon.png" /> 
</head> 
<body> 
<div id="strapwrap"> 
<div id="strap"> 
<div id="menu"><span id="sub"><a href="./">Home</a></span> <span id="sub"><a href="plans">Plans</a></span><span id="sub"><a href="faq">FAQ</a></span></div> 
<div id="logo"> 
<a href="./"><img src="images/logo.png" /></a> 
</div> 

</div> 
</div><div id="container"> 
<div id="login_thingy"> 
//all the login form, and some content goes here, unfortunately, it does not get centrally aligned. 
</div> 
</div>

가 여기 내있는 style.css

body{ 
margin: 0; 
background-image: url('http://athile.net/library/blog/wp-content/uploads/2011/11/grass02-300x300.png'); 
} 
#strapwrap{ 
background-color: #000000; 
color: white; 
width: 100%; 
height: 75px; 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 
} 
a{ 
color: inherit; 
text-decoration: inherit; 
} 
#strap{ 
width: 80%; 
margin: auto; 
margin-top: 0; 
margin-bottom: 0; 
} 
#menu{ 
font-size: 25px; 
height: 75px; 
float: right; 
margin: 0; 
padding-top: 25px; 
padding-bottom: 25px; 
word-spacing: 25px; 
} 
#sub:hover{ 
border-bottom: 1px dotted #ffffff; 
} 
#login_thingy{ 
width: 80%; 
margin: auto; 
margin-top: 15px; 
font-size: 35px; 
padding: 15px; 
text-align: center 
}

출처

2014-03-19 Daniyaal Khan

JSFiddle 라이브 예제 바랍니다. –

There : http://jsfiddle.net/LTcc8/1/ – enguerranws

Demo Fiddle

추가하여 CSS를 변경/변경 :

#container{ 
    text-align:center; /* new addition */ 
} 
#login_thingy { 
    width: 80%; 
    display:inline-block; /* replace margin auto */ 
    margin-top: 15px; 
    font-size: 35px; 
    padding: 15px; 
}

모든 당신이 필요로하는 부모 요소 (#container)에 text-align:center을 설정하고 자식 (#login_thingy)에 display:inline-block;을 설정하는 것입니다. 그런 다음 margin:auto

출처

2014-03-19 12:37:13 SW4

랩 <p>

<div id="login_thingy"> 
    <p>all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</p> 
</div>

사이드 참고 내부에 DIV 텍스트 : 그것은 하지에 좋은 연습입니다 내부에 직접 텍스트 콘텐츠를 배치하는 방법 div

Fiddle

출처

2014-03-19 12:36:26

이것이 올바른 대답이라고 생각합니다. 텍스트 노드는 div 요소 안에 직접 배치하면 안됩니다. – enguerranws

나는 동의하지만주의해야한다. 꼭 그렇지는 않다.'p'는'paragraph'를 가리키며 모든 텍스트가 (https://developer.mozilla.org/en-US/docs/Web/HTML/)에 의해 표시되지는 않는다. 요소/p)'div'는 단지 일반적인 요소 일뿐입니다 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) – SW4

사용

#container{ 
text-align:center 
}

DEMO

출처

2014-03-19 12:36:39

세미콜론 메이트가 없습니다. – Michael

@Michael 단 하나의 문장이있는 경우 세미콜론이 필요하지 않습니다. –

login_thingy div의 내용에 고정 폭을 적용하고 login_thingy div의 내용에 margin-left:auto;margin-right:auto;을 추가 할 수 있습니다. 우선 HTML 주석의

<div id="login_thingy"> 
<div style="width:50%;margin-left:auto;margin-right:auto;">all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</div> 
</div>

출처

2014-03-19 12:38:46 Bharadwaj

처럼

는 다음과 같습니다 : 모든 당신의 코드  두 번째는 잘못된 것입니다. 이 오류가 발생하는 이유가 될 수 text-align: center;의 끝에 세미콜론 (;)없이

#login_thingy{ 
    width: 80%; 
    margin: auto; 
    margin-top: 15px; 
    font-size: 35px; 
    padding: 15px; 
    text-align: center 
}

: CSS의 부분에서는 유형이 있습니다. 그래서 올바른 코드는 다음과 같습니다

#login_thingy{ 
    width: 80%; 
    margin: auto; 
    margin-top: 15px; 
    font-size: 35px; 
    padding: 15px; 
    text-align: center; 
}

문제가 해결되지 않으면, 그냥 보통의 헤더를 사용하여 원하는 경우 사업부 내부에 넣어. 좋아요 :

<h2 id="login_thingy"> TEXT HERE </h2>

희망이 있습니다.

출처

2014-03-19 12:39:53 Lae

젠장, 여러분 모두 CSS가 어떻게 해석되는지 모르십니까? 마지막 세미콜론과 브래킷은 필요하지 않지만 규칙을 추가 할 때 배치하는 것이 더 안전합니다. – enguerranws

당신은 실제로 마지막 세미콜론과 대괄호가 필요합니다. 나는 또한 나의 대답을 향상 시켰습니다. 다시 확인하십시오. – Lae

아니야. 모든 CSS minimifier는 마지막 세미콜론과 (전체 파일의) 마지막 괄호를 삭제합니다. 누락되면 오류가 발생하지 않습니다. 이 게임을 더 오래 플레이할까요? – enguerranws

텍스트가 중앙에 정렬되지 않습니다.

답변

Demo Fiddle

관련 문제