logo标签列表

如何使一个按钮在一个 div 中垂直居中？

htmlcss
3

我想在一个 div 中居中显示一个按钮。我可以通过以下方式实现：

transformation:translateY(25%);

但是，这对于较旧的浏览器是不允许的。以下是 div 和 button 的 CSS 代码：

#buttonSwap.swap{
        background: url("../img/thumb_10600.png") no-repeat;
        height: 15px;
        width: 15px;
        border: none;
    }

    .swapCities{
        float: left;
        height: 100%;
        width: 15px;
        margin: 5px 8px 0px 8px;
    }

而HTML代码如下：

<div class="swapCities">
                        <input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
                    </div>
2
"转换（transformation）不是一个属性，transform 是。" - Weafs.py
如果每次有人在SO上问这个问题时给我们一分钱，我们就会变得很富有。 - Alvaro Montoro
4个回答
4

在CSS中，有很多垂直居中的方法。我建议阅读http://css-tricks.com/centering-css-complete-guide/。

个人认为“ghost element”技术（http://codepen.io/KatieK2/pen/ucwgi）最通用。其思想是在容器前置一个具有100％高度的内联块伪元素，同样将按钮显示设置为内联块，并在两者上设置vertical-align: middle：

.swapCities:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#buttonSwap {
  display: inline-block;
  vertical-align: middle;
}
1
你需要类似这样的东西：
.swapCities{
    display: inline-block;/* or table-cell */
    vertical-align: middle;
}
这是我认为最简单、最干净的。干得好！ - Adam
1

这里有一个简单的例子：关键在于父容器设置了position:relative，而按钮则设置了position:absolute;

你可以使用top:50%; left:50%;...来将按钮的左上角对齐到中心位置;

为了完成居中，你需要给按钮添加margin，使其等于宽度和高度的一半。

将以下内容复制/粘贴到.html文件中，你将看到它的效果。

<!DOCTYPE html>
<html>
<body>
    <style>
        center { background-color:#CCCCCC; position:relative; min-height:600px; }
        button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
    </style>
    <center>
        <h2>Content Area</h2>
        <button type="button">Click Me</button>
    </center>
</body>
</html>
-1
你可以使用 position: absolute; 然后使用 top: 50% 属性来进行偏移。
看一下这个 Codepen，看看它对你是否有用：EXAMPLE HERE 你的 CSS 将会是这样的：
.swapCities{
  position: relative;
  height: 100px; width: 100px;
  margin: 5px 8px 0px 8px;
  border: 1px solid;
}

#buttonSwap.swap{
  position: absolute; 
  top: 50%; margin-top: -9px; 
  left: 50%; margin-left: -9px;
  background: url("../img/thumb_10600.png") no-repeat;
  height: 15px; width: 15px;
  border: 1px solid;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接