如何在动态大小的div的中心放置一个按钮

Posted 2023-03-05

【中文标题】如何在动态大小的div的中心放置一个按钮

【英文标题】：How to place a button in the center of div of dynamic size

【发布时间】：2013-03-07 23:16:20

【问题描述】：

我有这个代码：

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

输出为：this

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

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

谢谢。

【参考方案1】：

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

.button 
    display:block;
    margin: 0 auto;

【参考方案2】：

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

.button 
  display: block;
  margin: 0 auto;

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

【讨论】：

如果按钮内的文本太长而无法容纳在 100px 内，则会中断

是的。如果这个词很长。它没有显示结束部分。

你不需要宽度，这是真的。 100px 只是基于他给出的代码的一个例子。上次“发送”需要超过 100 像素是什么时候？

是的。我没有足够的声誉来投票。不过还是谢谢。

【参考方案3】：

只需将.button 更改为此，使用margin 属性。 （1 行修复）

.button

    margin:0 auto;

这是一个小提琴，我将.outer 设为500px 的固定宽度，只是为了展示margin 的作用示例：

DEMO

【参考方案4】：

这应该可以工作

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

fiddle

【讨论】：

我希望它是表格格式，并且我希望按钮位于 div 的中心。上面的 css 把它放在页面的中心。

然后将提交按钮包装在其他 div 中，并将此样式应用到它，宽度为：100%；小提琴：fiddle.jshell.net/mDHBX/9

【参考方案5】：

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

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

其他人更喜欢margin:auto 方法，但我个人从未发现这种方法有效。其他方法包括使用floats，但我不同意这个属性，因为它在某些浏览器中会错误对齐其他元素。

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