Html 如何在输入中对齐文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12114570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align texts inside of an input?
提问by phz
For all default inputs, the text you fill starts on the left. How do you make it start on the right?
对于所有默认输入，您填充的文本从左侧开始。你怎么让它从右边开始？
回答by elias
Use the text-alignproperty in your CSS:
在 CSS 中使用text-align属性：
input {
text-align: right;
}
This will take effect in all the inputs of the page.
Otherwise, if you want to align the text of just one input, set the style inline:
这将在页面的所有输入中生效。
否则，如果您只想对齐一个输入的文本，请设置内联样式：
<input type="text" style="text-align:right;"/>
回答by Gautam3164
Try this in your CSS:
在你的 CSS 中试试这个：
input {
text-align: right;
}
To align the text in the center:
居中对齐文本：
input {
text-align: center;
}
But, it should be left-aligned, as that is the default - and appears to be the most user friendly.
但是，它应该是左对齐的，因为这是默认设置 - 并且看起来对用户最友好。
回答by Cynthia
给你：
input[type=text] { text-align:right }<form>
<input type="text" name="name" value="">
</form>回答by Doug E Fresh
The accepted answer here is correct but I'd like to add a little info. If you are using a library / framework like bootstrap there may be built in classes for this. For example bootstrap uses the text-rightclass. Use it like this:
此处接受的答案是正确的，但我想添加一些信息。如果您使用的是像 bootstrap 这样的库/框架，则可能会为此内置类。例如引导程序使用text-right该类。像这样使用它：
<input type="text" class="text-right"/>
<input type="number" class="text-right"/>
As a note this works on other input types as well, like numeric as shown above.
请注意，这也适用于其他输入类型，例如上面显示的数字。
If you aren't using a nice framework like bootstrap then you can make your own version of this helper class. Similar to other answers but we are not going to add it directly to the input class so it won't apply to every single input on your site or page, this might not be desired behavior. So this would create a nice easy css class to align things right without needing inline styling or affecting every single input box.
如果您没有使用像 bootstrap 这样的好框架，那么您可以制作自己的这个助手类版本。与其他答案类似，但我们不会将其直接添加到输入类中，因此它不会应用于您网站或页面上的每个输入，这可能不是您想要的行为。因此，这将创建一个不错的简单 css 类来正确对齐内容，而无需内联样式或影响每个输入框。
.text-right{
text-align: right;
}
Now you can use this class exactly the same as the inputs above with class="text-right". I know it isn't saving that many key strokes but it makes your code cleaner.
现在，您可以使用与上面的输入完全相同的类class="text-right"。我知道它并没有节省那么多的击键，但它使您的代码更清晰。
回答by rulonder
If you want to get it aligned to the right after the text looses focus you can try to use the direction modifier. This will show the right part of the text after loosing focus. e.g. useful if you want to show the file name in a large path.
如果您想在文本失去焦点后将其向右对齐，您可以尝试使用方向修饰符。这将在失去焦点后显示文本的正确部分。例如，如果您想在大路径中显示文件名，则很有用。
input.rightAligned {
direction:ltr;
overflow:hidden;
}
input.rightAligned:not(:focus) {
direction:rtl;
text-align: left;
unicode-bidi: plaintext;
text-overflow: ellipsis;
}<form>
<input type="text" class="rightAligned" name="name" value="">
</form>The not selector is currently well supported : Browser support
not 选择器目前得到很好的支持：浏览器支持
回答by Nadeem Taj
@Html.TextBoxFor(model => model.IssueDate, new { @class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Select Invoice Issue Date", placeholder = "dd/mm/yyyy", style = "text-align:center;" })
@Html.TextBoxFor(model => model.IssueDate, new { @class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Select Invoice Issue Date", placeholder = "dd/mm /yyyy", style = "text-align:center;" })
回答by Hardeep Singh
Without CSS: Use the STYLE property of text input
没有 CSS：使用文本输入的 STYLE 属性
STYLE="text-align: right;"
样式="文本对齐：右；"
