Html 带非居中标签的居中字段

编辑

我想实现这样的目标：

                     Title title title title title title 
                                ------------
                                |input text| some text
                                ------------

               Title title title title title title title title
                                ------------
                                |input text| some other text
                                ------------

                           Title title title title
                                ------------
                                |input text| some other other text
                                ------------

让它居中的最简单方法是什么，但不是这样：

                     Title title title title title title 
                                ------------
                                |input text| some text
                                ------------

               Title title title title title title title title
                             ------------
                             |input text| some other text
                             ------------

                           Title title title title
                          ------------
                          |input text| some other other text
                          ------------

HTML:

演示：

---

您可以将div与

左填充一起使用：50%

像这样的方法应该会奏效：

HTML



 <div>
        <div class="title">
             Title Title Title
        </div>
        <div class="input">
            <input type="text" />Your Label
        </div>

        <div class="title">
             Title Title Title
        </div>
        <div class="input">
            <input type="text" />Your Label
        </div>

        <div class="title">
             Title Title Title
        </div>
        <div class="input">
            <input type="text" />Your Label
        </div>

    </div>


CSS

 .title{
     width:100%;
     text-align:center; 
 }

 .input {
     text-align:left;
     width:50%;
     margin: 0 25% 0 25%; 
 }

HTML
头衔
你的标签
头衔
你的标签
头衔
你的标签
CSS
.头衔{
宽度：100%；
文本对齐：居中；
}
.输入{
文本对齐：左对齐；
宽度：50%；
利润率：0.25%0.25%；
}

inside div将设置为其父级的50%，左右各有25%的边距，使其居中。文本对齐只是为了确保它不会继承页面上方的另一个对齐表单。更改为%以适应您的页面。您可能也应该在外部添加css。

试试以下方法：

HTML

<div class="center">
    <label>Name</label>
    <input type="text" />
</div>

<div class="center">
    <label>Address</label>
    <input type="text" />
</div>

---

这将产生第二个例子，海报不想要的。@Sixten Otto:见演示。不会。字段是对齐的，容器是居中的，但字段不沿整个中心线对齐。（经过编辑的示例使这一点更加清楚。）霍尔斯特，你为什么不勾选正确的答案？

HTML



 <div>
        <div class="title">
             Title Title Title
        </div>
        <div class="input">
            <input type="text" />Your Label
        </div>

        <div class="title">
             Title Title Title
        </div>
        <div class="input">
            <input type="text" />Your Label
        </div>

        <div class="title">
             Title Title Title
        </div>
        <div class="input">
            <input type="text" />Your Label
        </div>

    </div>


CSS

 .title{
     width:100%;
     text-align:center; 
 }

 .input {
     text-align:left;
     width:50%;
     margin: 0 25% 0 25%; 
 }

<div class="center">
    <label>Name</label>
    <input type="text" />
</div>

<div class="center">
    <label>Address</label>
    <input type="text" />
</div>

div.center {
    width: 200px;
    position: relative;
    margin: 0 auto;
    padding: 6px 0px;
}
label { position: absolute; left: 166px; }