Javascript DOM - alignement d'un élément de texte au centre?

J'ai un nœud de texte attaché à un div que je veux positionner dans le milieu de la page. Ces éléments sont fixés à un mainDiv qui, comme l'ensemble de la page. Voici le code que j'essaie:

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

Malheureusement, le titre reste sur le haut à gauche de la page; je le veux en haut centré.
EDIT juste pour clarifier, je voudrais le faire en Javascript, si possible.

Merci pour toute aide.

  • jsfiddle.net/userdude/eN3Mc Vous code semble fonctionner, donc je suppose qu'il a quelque chose à voir avec un parent de l'élément de largeur/positionnement/float/etc...
  • D'accord avec @Jared. Votre code fonctionne très bien pour moi. Si le parent est en bateau ou de la position absolue qui serait certainement expliquer que le parent se terminera à la taille du plus grand élément enfant.
  • le parent est littéralement juste (en html) <div id="mainDiv"></div>
InformationsquelleAutor JDS | 2011-08-15
  1. 4

    Juste de ce que vous avez posté, nous ne pouvons pas vous donner une réponse définitive.

    Nous avons besoin de prendre en considération ce qui est défini dans votre CSS et aussi les parents de la DIV de l'insertion.

    Réglage des marges gauche et droite de l'auto, par exemple, de ne pas travailler pour un div qui n'a pas une largeur définie, et la mise en texte-alignez le centre ne fonctionne pas comme prévu pour un div dont la largeur a été restreinte.

    Voici un exemple de code qui fonctionne bien, de toute façon:

    <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>
    • le mainDiv n'a pas été limité et il n'y a pas actuellement de code css.
    InformationsquelleAutor Sarhanis
  2. 1

    essayez de définir les marges gauche et droite à "auto"

    • Cela ressemble étrangement à un commentaire... 😉
    InformationsquelleAutor kfiroo