CSS выравнивания текста свойство

У меня есть следующий HTML:CSS выравнивания текста свойство

<!DOCTYPE html> 
<HTML> 
    <HEAD> 
     <style type="text/css"> 
      .name { 
       font-size: 18px; 
       margin-top: 1px; 
       text-align: right; 
      } 

      .contactInfo { 
       font-size: 12px; 
       margin-top: 1px; 
       text-align: left; 
      } 
     </style> 
     <TITLE>Joe Sixpack</TITLE> 
    </HEAD> 
    <BODY> 
     <div id="name"> 
      <span class="name">Joe Sixpack</span> 
     </div> 

     <div id="contactInfo"> 
      <span class="contactInfo"> 
       123 Electric Ave, Mudflap, NS 12345 &#8226; (888) 555-1212 &#8226; <A HREF="mailto:[email protected]">[email protected]</A> 
      </span> 
     </div> 

     <HR> 
    </BODY> 
</HTML>

Проблема заключается в том, что я хотел бы класс имя будет выровнено по правому краю, но это не происходит. И имя, и адрес находятся слева. Почему это и как я могу это исправить?

источник

2013-03-06 amphibient

Установите стиль на имя DIV, а не диапазон Имя:

#name { 
    font-size:18px; 
    margin-top:1px; 
    text-align:right; 
}

Кроме того, вы не можете иметь дивы и охватывает с тем же именем ,

источник

2013-03-06 21:09:13 jcaponi

спасибо. Я думал также, что divs и spans следует назвать по-другому, но лениться изменить. но можете ли вы сказать мне какие-то конкретные причины? – amphibient

Добавьте 'div {outline: 1px dashed blue} span {outline: 1px dashed green}', чтобы увидеть ширину этих элементов. Элементы, отображаемые как блок (по умолчанию 'div'), будут занимать всю ширину их родителя, чтобы вы могли выровнять их содержимое по своему желанию. Но элементы, отображаемые как inline, являются размером их содержимого: вы не можете переместить что-то, когда для этого нет места (поскольку свойство 'text-align' не * перемещает * элемент вокруг, оно выравнивает его * содержимое *). – FelipeAls

используйте разные имена для классов и идентификаторов, чтобы упростить отслеживание и избежать css-столкновений между .name и #name (хотя я получаю и # неправильно даже с разными именами!) – jcaponi

Вы можете выровнять текст только внутри элементов уровня блока. Перепишите вы CSS, чтобы быть похожим, что:

#name { 
    font-size:18px; 
    margin-top:1px; 
    text-align:right; 
} 

#contactInfo { 
    font-size:12px; 
    margin-top:1px; 
    text-align:left; 
}

источник

2013-03-06 21:07:39

замечательный! спасибо за быстрый ответ. – amphibient

CSS выравнивания текста свойство

ответ

Смежные вопросы