36

我有三个 HTML 对象，想在左侧排列上一个按钮，在右侧排列下一个按钮，并在容器 div 的中间排列。

<PREVIOUS> |SPAN| <NEXT>


    #btnPrevious
    {
        float:left;
    }
    #spanStage
    {
        font-weight:bold;
        vertical-align:middle;    
    }
    #btnNext
    {
        float:right;
    }
    <div>
        <input type="button" value="Previous" id="btnPrevious"/>
        <span id="spanStage">Stage 5</span>
        <input type="button" value="Next" id="btnNext"/>
    </div>

4

5 回答 5

45

"display:flex" 样式是使这些元素在同一行中的好方法。不管 div 中有什么样的元素。特别是如果输入类是表单控制，其他解决方案，如引导程序，内联块将无法正常工作。

例子：

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
     <input type="button" value="Previous" id="btnPrevious"/>
     <span id="spanStage">Stage 5</span>
     <input type="button" value="Next" id="btnNext"/>
</div>

有关 flexbox 的更多详细信息：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

弹性方向：行，列

justify-content: flex-end, center, space-between, space-around

对齐项目：拉伸，flex-start，flex-end，center

于 2017-12-08T02:08:15.337 回答
24

只需添加text-align: center到您的包装器以设置所有非浮动/非定位子项的水平对齐方式：

div{
    text-align:center;
}

<span>默认情况下是内联元素。因此，您要么必须使用display:block它们并适当地设置它们的样式，要么只需稍微调整父样式。由于使用这个简单的解决方案，除了 the<span>和s之外没有其他孩子。<button>

请注意，它text-align:<value>是从父级继承的，因此如果您想在包装器中包含其他内容，您应该检查是否text-align:center适合您。否则text-align:<value>在特定元素中使用，其中valueis left、或。rightcenterjustify

JSFiddle 演示

于 2012-06-16T12:20:10.080 回答
8

将类添加line到您想要在一行中的所有子元素中，瞧！他们听从你的命令，排成一列。

.line {
    width:33%;
    float:left;
}
<div>
    <input type="button" class="line" value="Previous" id="btnPrevious"/>
    <span id="spanStage" class="line">Stage 5</span>
    <input type="button" class="line" value="Next" id="btnNext"/>
</div>

于 2012-06-16T12:18:54.547 回答
7

尝试使用display:flex.

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
<div class="header">
    <input type="button" value="Previous" id="btnPrevious"/>
    <span id="spanStage">Stage 5</span>
    <input type="button" value="Next" id="btnNext"/>
</div>

于 2019-11-22T04:44:48.937 回答
4

只需将其添加到您的 CSS 中。

#btnPrevious,#spanStage,#btnNext {
      width:33%;
       display:inline-block;
     }
于 2016-08-30T15:03:50.423 回答