Javascript DOM - 將文本元素對齊到中心？

我有一個文本節點附加到我想要在頁面中間位置的div。這些元素被附加到一個mainDiv，就像整個頁面一樣。這是我想要的代碼：Javascript DOM - 將文本元素對齊到中心？

title = document.createElement('div'); 
title.appendChild(document.createTextNode("The big title!")); 
title.style.color = "#F5AE20"; 
title.style.textAlign = "center"; //this is what I'm trying to solve my problem 

mainDiv.appendChild(title);

不幸的是，標題停留在頁面的左上角;我希望它居於頂端。編輯 - 爲了澄清，如果可能的話，我希望在Javascript中這樣做。

感謝您的任何幫助。

來源

2011-08-15 JDS

http://jsfiddle.net/userdude/eN3Mc/您的代碼似乎工作，所以我的猜測是它有事情做與父元素的寬度/定位/浮動/等... –

同意@Jared。你的代碼對我來說工作得很好。如果父項是浮動的或絕對位置肯定會解釋它，因爲父項將包裝到最大的子元素的大小。 – Endophage

父母字面上只是（在html中）

– JDS

。

我們需要考慮CSS中定義的內容以及您要插入的DIV的父項。

例如，將左邊距和右邊距設置爲自動不適用於沒有定義寬度的div，並且將文本對齊設置爲居中將無法按預期工作，寬度受到限制。

下面是一些例子代碼，肯定能行，反正：

<html> 
<head> 
<script type="text/javascript"> 
function displayResult() 
{ 
title = document.createElement('div'); 
title.appendChild(document.createTextNode("The big title!")); 
title.style.color = "#F5AE20"; 
title.style.textAlign = "center"; //this is what I'm trying to solve my problem 

document.getElementById("div1").appendChild(title); 
} 
</script> 
</head> 
<body> 

<div id="div1">This is some text.</div> 
<br /> 

<button type="button" onclick="displayResult()">Align text</button> 

</body> 
</html>

來源

2011-08-15 23:46:11 Sarhanis

mainDiv沒有受到約束，目前沒有CSS代碼。 – JDS

嘗試剛剛從你張貼的東西，我們不能給你一個明確的答案設置左右邊距爲「自動」

來源

2011-08-15 23:10:36 kfiroo

這聽起來像一個評論...;） –

Javascript DOM - 將文本元素對齊到中心？

回答

相關問題