Почему мой текст не сосредоточен в таблице HTML?

Question

Я хочу создать простую форму для входа. Я почти сделал это, но текст в моем столе не идет вправо. Для этого я использую <span>. Мой HTML-код здесь.

<div id="login-container"> 
<form action="login.php" method="post" > 
<table> 
    <tbody> 
     <tr> 
     <td><span>Username:</span></td> 
     <td><input type="text" name="username" value="" ></td> 
     </tr> 
     <tr> 
     <td><span>Password</span></td> 
     <td><input type="password" name="password" value="" ></td> 
    </tr> 
     <tr> 
     <td></td> 
     <td><input type="checkbox" name="remember" value="off">remember me?</td> 
    </tr> 
     <tr> 
     <td></td> 
     <td><input type="submit" name="submit" value="Login" id="button"></td> 
    </tr> 
    </tbody> 
</table> 

И мой CSS здесь. Когда я использую float:right, он направляется вправо.

span { 
    color:black; 
    font-family:"Arial Black", Gadget, sans-serif; 
    font-weight:bold; 
    font-size:13px; 
    text-align:right; 
} 

Answer 1

Свойство text-align не относится к встроенным элементам, а span элементы являются встроенными по умолчанию. Минимальное исправление заключается в добавлении

span { display: block } 

Однако такие правила являются рискованными; вы, вероятно, должны использовать более ограничительный селектор, но это зависит от структуры страницы.

Вместо span, label следует использовать для обеспечения доступности; но ths не меняет основной вопрос, так как label также встроен.

В качестве альтернативы, установите стиль на элементах td.

Answer 2

text-align свойство не относится к строковым элементам и span является встроенным элементом. Следовательно, свойство text-align не относится к нему.

Если вы не хотите использовать float:right;

Вы могли бы использовать:

td{ 
    text-align:right; 
} 

PS: Было бы умнее, чтобы дать этой конкретной tdID, в противном случае все будет td выровнять по правому краю, как показано ниже.

JSFiddle Demo

Answer 3

<span> занимает только ширину текста доступной, поэтому назначение text-align:right к span не сделает никакой разницы, вы должны применить его к td.

Пример: Смотрите эту ссылку для лучшего понимания о Span

CSS:

span { 
color:black; 
font-family:"Arial Black", Gadget, sans-serif; 
font-weight:bold; 
font-size:13px; 

} 
td{text-align:right;} 

Смотрите эту скрипку: DEMO

PS: Ваш вопрос не ясно, ваш заголовок говорит, что «он не пойдет в центр», но в вашем объяснении говорится, что «это будет не так». Предполагая, что вы хотите, чтобы все было правильно, я дал решение.