Question

修改

我想实现类似的目标：

                     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
                          ------------

Answer 1

HTML：

<div class='mycentereditem'>
  <input type='text' />
  text
</div>
<div class='mycentereditem'>
  <input type='text' />
  more text
</div>
<div class='mycentereditem'>
  <input type='text' />
  even more text
</div>

CSS：

.mycentereditem {
  text-align: left;
  margin: 0 auto;
  width: 400px;
}

演示：

http://jsfiddle.net/6aLyj/

Answer 2

试试这个：http://jsfiddle.net/5CYHZ/1/

<强> HTML

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

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

<强> CSS

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

Answer 3

你可以使用padding-left:50%的div。 Live demo

Answer 4

这样的事情应该有效：

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将设置为其父级的50％，左侧和右侧的25％边距保持居中。 text-align只是为了确保它不会在页面的上方继承另一个对齐形式。将％更改为适合您页面的内容。你应该在外部添加css。

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

4 个答案: