8

我有这个代码：

<div class="outer">
    <ul class="list">
        <li class="inner">
            <div class="line">information1</div>
            <div class="line">hyperlink1</div>
        </li>
        <li>
            <div class="line">information2</div>
            <div class="line">hyperlink2</div>
        </li>
        <li>
            <div class="line">information3</div>
            <div class="line">hyperlink3</div>
        </li>
        <li>
            <div class="line">information4</div>
            <div class="line">hyperlink4</div>
        </li>
    </ul>
    <input type="submit" id="send" value="send" class="button"/>
</div>

和CSS：

.outer
{
    display: table;
    border: 1px solid;
    padding: 5px;
}    
.list
{
    list-style: none;
    padding: 5px;
}    
.inner
{
    display: table-row;
    padding: 5px;
}    
.line
{
    display: table-cell;
    border: 1px solid;
    border-radius: 5px;
}    
.button
{
    top:50%; 
    left:50%;
}

输出是：这个

现在我想把按钮放在“外部”div的中心，不管宽度是多少。

示例：我希望按钮位于中心甚至：this。无需在每次 div 大小更改时更改 css。即使“外部”div 是动态的，按钮也应该位于中心。

谢谢你。

4

5 回答 5

18

这以一种简单、简洁的方式实现了您正在寻找的内容：

.button {
    display:block;
    margin: 0 auto;
}
于 2013-03-19T10:30:34.407 回答
4

你需要给按钮一个特定的宽度，然后你可以使用自动边距

.button {
  display: block;
  margin: 0 auto;
}

http://fiddle.jshell.net/CrHyd/

于 2013-03-19T10:31:12.870 回答
1

有不止一种方法可以做到这一点。我更喜欢使用这样的百分比：

input[type="submit"]{
    min-width:20%;
    max-width:20%;
    margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}

其他人更喜欢一种margin:auto方法，但就我个人而言，我从未发现这种方法可行。其他方法包括 usingfloats但我不同意此属性，因为它在某些浏览器中未对齐其他元素。

使用 top 和 left 会导致错误，因为您没有指定除默认（静态）以外的位置类型。

于 2013-03-19T10:30:39.840 回答
0

这应该工作

.outer {
display: inline-block;
text-align: center;
}

小提琴

于 2013-03-19T10:31:35.700 回答
0

只需.button使用该margin属性更改为这个。（1 行修复）

.button
{
    margin:0 auto;
}

这是一个小提琴，我在其中设置了.outer一个固定宽度，500px只是为了展示一个例子margin：

演示

于 2013-03-19T10:37:49.480 回答