Question

我试图将一个角色纵向和横向都放在div中我曾使用下面的css来实现这一目标。

  margin : 0 auto; //attempt1
  text-align:center; //attempt2

两者都不起作用，尝试2只是水平对齐字符。
但我也需要垂直对齐它。

My Code is here

实现这一目标的任何线索？

Answer 1

这就是你解决它的方法：

首先将字符包装在元素中：

<div id="DivMenu">
   <div id="character">R</div>
</div>

然后设置以下CSS：

#DivMenu{
   ...
   text-align:center;
}

#character{
   position:relative;
   top:50%;
   margin-top:-10px
}

Working example

Answer 2

跨浏览器水平对齐有点棘手。

在您提供的示例的上下文中，您可以使用：

line-height:100px;

对于其他上下文，您需要使用javascript并绑定：

$.fn.vAlignBlock = function() {
        return this.each(function(i){
                var ah = $(this).height();
                var ph = $(this).parent().height();
                var mh = (ph - ah) / 2;
        $(this).css('margin-top', mh);
        });
};


$.fn.vAlignInlineBlock = function() {
    return this.each(function(i) {
        var h = $(this).height();
        var oh = $(this).outerHeight();
        var mt = (h + (oh - h)) / 2;
        $(this).css("margin-top", "-" + mt + "px");
        $(this).css("top", "50%");
        $(this).css("position", "absolute");
    });
};

Answer 3

我经常使用的一种技术是将你想要的东西包裹在block元素中。它要求您知道要居中的宽度和高度。 Here is a demo

<div>
    <span>R</span>
</div>

然后你设置span元素（或任何你想要的，但保持语义！），如下所示：

span {
    width:10px;
    height:20px;
    margin:-10px 0 0-5px; /* margin-top is minus half your height, margin-left is minus half your width */
    top:50%; left:50%;
    position:absolute;
    display:block;
}

如果您不希望将DOM无用的元素用于演示目的，则可以将文本节点的line-height与容器的高度相匹配。缺点是，如果你的文本跨越两行，它将不可避免地搞砸你的设计，因为line-height异常高。 Here is a demo

div {
    [...]
    width: 200px;
    height: 200px;
    text-align:center;
    line-height:200px;
}

Answer 4

这是Jsfiddle http://jsfiddle.net/HLet2/1/

<div id="DivMenu">
    <p>R</p>
</div>


#DivMenu
{
position:absolute;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);
background: #ccc;
border: 2px solid #2F2E2E;
width: 10%;
height: 12%;

}

#DivMenu p
{
    text-align:center;
    margin-top:50%;
}

Answer 5

另一种方法是使用好的旧line-height来创建垂直对齐。我们的想法是使线高与高度相同。然后text-align: center为水平。这适用于我测试的所有主流浏览器，是最简单的解决方案。

在此示例中，对齐属性与其余样式分开：

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

#DivMenu
{   
    background: #CCC;
    border: 2px solid #2F2E2E;
    width: 100px;
    height: 100px;

    text-align: center;
    line-height: 100px;
}

</style>
</head>

<body>
<div id="DivMenu">
    R
</div>
</body>
</html>

Answer 6

垂直居中的另一个简单想法是删除高度属性并在顶部和底部添加填充，每个填充都是原始高度的一半。当然，对于水平居中，请使用text-align：

text-align: center;
padding-top: 6%;
padding-bottom: 6%;

将角色置于DIV中心

6 个答案: