出於某種原因，我的文字不會集中對齊。這是一點左邊。即使我做文本對齊：對，它不會去它應該的地方。這是我的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

JSF現場實例請。 –

有：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; 
}

所有你需要的在子元素（#login_thingy）上的父元素（#container）然後display:inline-block;上設置text-align:center。您可以刪除任何使用margin:auto

來源

2014-03-19 12:37:13 SW4

環繞你的div文本中<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

Fiddle

來源

2014-03-19 12:36:26

我認爲這是正確的答案。文本節點不應直接放置在div元素內。 – enguerranws

我同意但要警惕..不一定總是如此，'p'表示'段落'，並非所有文本都可以標記（https://developer.mozilla.org/en-US/docs/Web/HTML/ Element/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

@邁克爾如果只有一條語句，不需要分號 –

將固定寬度應用於login_thingy div的內容並將margin-left:auto;margin-right:auto;添加到login_thingy div的內容中。

像

<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

的首先HTML評論是這樣的： 二的你的代碼是錯誤的。在CSS部分，你必須輸入：

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

沒有在text-align: center;分號結尾（;），這可能是你收到此錯誤的原因。所以正確代碼：

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

如果不工作，只用一個正常的頭，並把它一個div裏面，如果你的願望。像這樣：

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

希望這對我有所幫助。

來源

2014-03-19 12:39:53 Lae

該死的，你們所有人都不知道CSS是如何解釋的？你永遠不需要最後的分號和括號，但是，放置它們更安全，因爲你可能會添加更多的規則。 – enguerranws

你實際上確實需要最後一個分號和括號。我也改進了我的答案，所以再次檢查它。 – Lae

不，你不知道。所有的CSS最小化都刪除最後一個分號和最後一個括號（整個文件）。錯過它們不會發生錯誤。我們會繼續玩這個遊戲嗎？ – enguerranws

文字沒有集中對齊

回答

Demo Fiddle

相關問題