Pourquoi ne puis-je pas aligner à droite un élément avec display: block et width: X?

Total n00b question ici (au moins pour le CSS élite):

Pourquoi est-ce qu'un élément à la fois display: block; et une valeur pour width ne semble pas tomber en ligne avec la text-align propriété de son parent? C'est, il me semble toujours insister sur le maintien de la gauche.

Voici un jsFiddle illustrant le problème.

De toute évidence, cela doit être cohérent avec le CSS (je veux dire, si Chrome, Firefox et Opera tous d'accord sur ça, j'ai très peu de doute); je n'ai pas vraiment l'obtenir.

source d'informationauteur Dan Tao

  1. 12

    Le texte est aligné à droite à l'intérieur d'un 150px de la boîte. Qui est correct. Un élément de bloc ne s'alignera pas à text-align dans le parent.

    Pour corriger cela, vous devez utiliser display: inline-block ou float: right sur le .largeur de la div.

    edit: avec flotteur, ajouter clear: right pour éviter qu'il soit sur la même ligne que le précédent div

  2. 0

    C'est parce que votre classe est de bloquer la largeur de pas de la largeur. Renommez la classe block_width et puis dans votre css faire le dernier .block_width plutôt que de la .la largeur que vous avez et il fonctionne

  3. 0

    <span> est un élément avec display: inline. Éléments avec display: inline suivant l'alignement du texte. Éléments avec display: block ne pas suivre l'alignement de texte sont alignées DÉTENUE par le flotteur.

    Lorsque vous modifiez la largeur de l'élément reste inline, à la suite de l'alignement du texte, mais, lorsque vous modifiez l'affichage de bloquer et de modifier sa largeur, son contenu suppose l'alignement du texte, mais l'élément n'a pas. J'ai essayé d'illustrer cela avec un peu de couleur dans votre code 😉

    http://jsfiddle.net/Z6Twf/3/

  4. 0

    autre façon

    <div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
  <div style="">
<p> Hello </p>
</div>