1

我试图在一个 div 中垂直和水平地居中一个字符。
我使用下面的css来实现这一点。

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

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

我的代码在这里

有什么线索可以实现这一目标吗？

4

6 回答 6

2

这是你修复它的方法：

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

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

然后设置以下CSS：

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

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

工作示例

于 2012-12-21T18:59:51.823 回答
1

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

text-align: center;
padding-top: 6%;
padding-bottom: 6%;
于 2012-12-22T02:04:26.377 回答
0

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

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

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");
    });
};
于 2012-12-21T18:59:06.533 回答
0

我经常使用的一种技术是将要居中的东西包装在一个block元素中。它要求您知道要居中的宽度和高度。这是一个演示。

<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它异常高。这是一个演示。

div {
    [...]
    width: 200px;
    height: 200px;
    text-align:center;
    line-height:200px;
}
于 2012-12-21T19:00:25.693 回答
0

这是 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%;
}
​
于 2012-12-21T19:00:52.290 回答
0

另一种方法是使用 good oldline-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>
于 2012-12-21T19:05:54.537 回答