html - 对齐容器中的按钮

Question

我不擅长前端（html、css 等）。我想对齐容器中的一些按钮，如下所示。容器将有一些标题和一些按钮。请帮帮我。

提前致谢。

Answer 1

如果您有两个button元素并且希望它们居中对齐 - 将 a 添加text-align: center到它们的父级。工作示例在这里：http: //jsfiddle.net/skip405/uvAcj/

如果您想指定按钮之间的距离 - 只需margin-left根据您的需要调整属性。选择button:first-child器不会将第一个按钮向左移动，它们将完全对齐中心。

Answer 2

你可以通过这个实现你的结果：-

HTML

 <fieldset>
<legend>Container Heading</legend>
<button id="visit_return_button" type="submit">Button1</button>
<button id="visit_return_button" type="submit">Button2</button>
 </fieldset>

CSS

    fieldset {
    border:1px solid;
    width:200px;
    height:70px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

legend {

    margin-left:5px;
}

#visit_return_button{
    background-color:#9C8C42;
    border: 2px solid #91782c;
    color: #FFF;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
}

或查看演示：- http://jsfiddle.net/VY8xs/21/

Answer 3

我喜欢使用 css 浮动选项来做到这一点。但是有几种方法可以做到这一点。您应该为每个按钮创建一个 div 并使用 css 正确对齐它们。

例如：

CSS

#button1{
float: left;
margin-top: 10px;
}

#button2{
float:left;
margin-top: 10px;
margin-left: 10px;
}

HTML

<div id="container">
    <div id="button1">
         Your button HTML here
    </div>

    <div id="button2">
         Your button HTML here
    </div>
</div>

Answer 4

jsfiddle 示例

<style>
    div#container {
    overflow:hidden;
    border:1px solid #000;
    width:200px;
    position:relative;
    padding:5px;
}

div#container > button {
    float:left;
    /*or float:right; */
}

​
</style>

<div>containing heading</div>
<div id="container">
<button>submit</button>
<button>cancel</button>
</div>​