文本在带有输入字段的居中 div 中左对齐

Posted 2023-03-29

【中文标题】文本在带有输入字段的居中 div 中左对齐

【英文标题】：Text align left in a centered div with input fields

【发布时间】：2015-10-02 02:47:41

【问题描述】：

我的输入字段应该居中显示，然后这些输入字段的文本应该左对齐并与输入字段“开始”。

http://jsfiddle.net/tfbatp5v/2/

.inputdes 
    color: #9b9b9a;
    font-size:20px;
    height: 200px;

.blue 
    height: 70px;

<div align="center" id="parent">
    <div class="welcome">Welcome</div>
    <div class="inputdes">
        <div class="blue">text1<br><input id="inputfield1" /></div>
        <div class="blue">text2<br><input id="inputfield2" /></div>
        <div class="blue">text3<br><input id="inputfield3" /></div>
    </div>
</div>

但是，无论我做什么，每次我使用text-align: left; 时，它都会自动将输入字段左对齐。我试图将文本区域与类名组合在一起，但它不起作用。有人知道答案吗？

谢谢！

【参考方案1】：

建议不要使用align="center"，因为align 属性已被弃用。您应该在容器上使用 CSS text-align 属性。

display: table; 规则将使元素“缩小以适应”内部内容，而无需指定 width 值。

#parent 
    display: table;
    margin: 0 auto;

.welcome 
    text-align: center;

.inputdes 
    color: #9b9b9a;
    font-size: 20px;
    height: 200px;

.blue 
    height: 70px;

<div id="parent">
    <div class="welcome">Welcome</div>
    <div class="inputdes">
        <div class="blue">text1<br><input id="inputfield1" /></div>
        <div class="blue">text2<br><input id="inputfield2" /></div>
        <div class="blue">text3<br><input id="inputfield3" /></div>
    </div>
</div>

【参考方案2】：

尝试以下方法。想法是我们限制@9​​87654321@ div 的宽度，然后将文本放入具有text-align: left 的嵌套div 中。这样我们可以使输入居中，但文本在其 div 内左对齐。

.inputdes
    color: #9b9b9a;
    font-size:20px;
    height: 200px;
    width: 200px;

.inputdes > div > div 
    text-align: left;
    margin: 0 15px;

.blue
    height: 70px;

<div align="center" id="parent">
    <div class="welcome">Welcome</div>
    <br>
    <div class="inputdes">
        <div class="blue" ><div>text1</div>   
            <input id="inputfield1"/></div>
        <div class="blue" ><div>text2</div>
            <input id="inputfield2" /></div>
        <div class="blue" ><div>text3</div>
            <input id="inputfield3" /></div>
    </div>
</div>    

【参考方案3】：

您可以为字段周围的输入提供固定宽度，并为输入提供 width: 100% 以使用 text-align: left。

.inputdes
  
  color: #9b9b9a;
  font-size:20px;
  height: 200px;
  width: 200px;
  text-align: left;


input  
    width: 100% 



.blue
  height: 70px;
 

<div align="center" id="parent">
    <div class="welcome">Welcome</div>
    <div class="inputdes">
        <div class="blue" >text1<br>   
            <input id="inputfield1"/></div>
        <div class="blue" >text2<br>
            <input id="inputfield2" /></div>
        <div class="blue" >text3<br>
              <input id="inputfield3"  /></div>
    </div>
</div>

这是更新后的小提琴： https://jsfiddle.net/tfbatp5v/11/