将HTML元素居中放置在两个其他元素之间，不带表格

这次我尝试将一个元素置于其他元素之间的中心。有了一张桌子，它的外观和行为完全符合我的要求。查看小提琴中的第一条蓝线，也许您需要一个更宽的结果窗口来查看正确的行为：

车身，分区，工作台，td{ 保证金：0； 边界：0； 填充：0； } 表，td{ 边界塌陷：塌陷； } .设置{ 背景：蓝色； } .settings.input.year{ 宽度：3em； } .settings.input.month， .settings.input.day， .settings.input.hour， .settings.input.minute{ 宽度：1.5em； } .settings.input.number{ 宽度：2米； } .p.设置{ 颜色：白色； } /*无表版本*/ .设置开关不可打开{ 背景：蓝色； } .settingsWithoutTable input.year{ 宽度：3em； } .settingsWithoutTable input.month， .settingsWithoutTable input.day， .settingsWithoutTable input.hour， .settingsWithoutTable input.minute{ 宽度：1.5em； } .settingsWithoutTable input.number{ 宽度：2米； } .设置开关可调量程{ 颜色：白色； } ... 从

第一 Scnd 推 Num

... 从…起 第一 Scnd 推 号码 试试这个

html:

<div class="settingsWithoutTable">
       <div class="fromColumn">
        <span>From</span>
        <input class="year" value="2014"/>
        <input class="month" value="04"/>
        <input class="day" value="03"/>
        <input class="hour" value="02"/>
        <input class="minute" value="01"/>
        <button>Frst</button>
        <button>Scnd</button>
        </div>

        <div class="buttonColumn">
        <span style="width: 50%"></span>
        <button>Push</button>
        </div>

        <div class="numColumn">
        <span style="width: 50%"></span>
        <span>Num</span>
        <input class="numbers"></input>
            </div>
    </div>

---

您可以使用此CSS将跨度和输入元素居中

.settingsWithoutTable{
 padding:10px;   
}

如果你需要更少的空间，你可以这样做

 .settingsWithoutTable{
     padding:10px 5px;   
 }

第一个数字表示顶部和底部，第二个数字表示侧面

---

CSS速记从顶部开始顺时针运行。

使用浮动查看此标记：

这是你的电话号码

Css:

HTML

---

这里是对我先前添加内容的修订。它让你异乎寻常地得到你想要的东西。中间按钮直接停留在中间。

.settingsWithoutTable{
    padding:10px 0
}

填充到顶部和底部

.settingsWithoutTable input, .settingsWithoutTable button{
    margin:-4px
}

将输入和按钮组合在一起

.settingsWithoutTable button:last-of-type{
    margin-left:31%
}

.settingsWithoutTable span:last-of-type, .settingsWithoutTable input:last-of-type{
    float:right;
        margin:0
}

将最后一个跨距和输入浮动到右侧

您必须使用.settingsWithoutTable类翻转最后一个跨距和Div中的输入，因为float right是如何呈现它们的

像这样

<input class="numbers"></input>
<span>Num</span>

---

如果你不介意放弃对旧IE浏览器的支持，你可以使用

只需将“行”的显示设置为弹性，并相应地调整“单元格”

/*无表版本*/ .设置开关不可打开{ 背景：蓝色； 显示器：flex； 最小宽度：400px； } .设置开关可关闭。中心{ 文本对齐：居中； 宽度：100%； } .settingsWithoutTable input.year， .设置SwithOuttable>按钮， .设置开关可调量程{ 最大宽度：3em； 最小宽度：3em； } .settingsWithoutTable input.month， .settingsWithoutTable input.day， .settingsWithoutTable input.hour， .settingsWithoutTable input.minute{ 最大宽度：1.5em； 最小宽度：1.5em； } .settingsWithoutTable input.number{ 最大宽度：2米； 最小宽度：2米； } .设置开关可调量程{ 颜色：白色； } 从…起 第一 Scnd 推 号码

---

添加一些div，然后为每个div指定一个特定的宽度，并将“文本对齐”属性设置为“居中”，使其居中@我想你听错了。那些说现在桌子不用于布局的人简直是自大。若这张桌子适合你们的需要，那个么一定要用它。如果要实现相同的功能，可以通过将div的单元格行设置为table row/table cell，并将相应div的display设置为table-row/table-cell来构建表。还有其他方法可以达到预期的效果，但这与堆栈溢出无关，因为这是一个意见问题。表不适用于一般页面布局，这是目前公认的标准。然而，对于表格数据和许多人认为的表单布局，它们被认为是合适的。如果一个表解决了你的问题，那就继续使用一个表。纯粹主义者该死。@Banana使用表进行布局不会导致语义问题吗？如果你的布局不是表格数据，那不是错了吗？这也是我听到的。这听起来是对的：/这实际上是迄今为止最好的答案，但仍然有新行，如果窗口宽度改变，我更喜欢任何列都没有固定宽度的解决方案……与表相比，浮动就是这样。它利用较小宽度的媒体查询进行补偿。感谢第二个答案！除了小窗口外，看起来还不错：换行符出现，一切都乱七八糟……因为你总是告诉我在评论中使用表格，你的解决方案看起来相当不错：@caligula很高兴我能帮忙：……你给我看了代码片段！为什么我又注册了JSFIDLE@caligula，在JSFIDLE中，您可以调整结果窗口的大小，并查看正在运行的代码：……这对于以下主题非常重要：

.settingsWithoutTable input, .settingsWithoutTable button{
    margin:-4px
}

.settingsWithoutTable button:last-of-type{
    margin-left:31%
}

.settingsWithoutTable span:last-of-type, .settingsWithoutTable input:last-of-type{
    float:right;
        margin:0
}

<input class="numbers"></input>
<span>Num</span>