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);

残念ながらタイトルは、ページの左上にとどまります。私はそれを中心にしたい。 EDIT - できるだけ明確にするために、私はJavascript内でこれを行いたいと思います。

ありがとうございました。

出典

2011-08-15 JDS

http://jsfiddle.net/userdude/eN3Mc/あなたのコードが動作するように見えるので、私の推測では、それは親とは何かを持っています要素の幅/位置/浮動小数点数/ etc ... –

@Jaredと同意します。あなたのコードは私にとってうまくいっています。親が浮動しているか絶対に位置付けられている場合、親が絶対最大の子要素のサイズにラップするので、確かにそれを説明するでしょう。 – Endophage

親は文字通りちょうど（htmlで）

– JDS

を試してみてください、私たちはあなたに決定的な答えを与えることはできません。

CSSで定義されているものと、挿入するDIVの親を考慮する必要があります。

たとえば、左右の余白をautoに設定すると、定義された幅を持たないdivでは機能せず、text-alignをcenterに設定すると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 - テキスト要素を中央に揃えていますか？

答えて

関連する問題