Css 将字符置于DIV的中心_Css_Html_Alignment

Css 将字符置于DIV的中心

css html

Css 将字符置于DIV的中心,css,html,alignment,Css,Html,Alignment,我试图在div中垂直和水平居中放置一个字符。我使用了下面的css来实现这一点 margin : 0 auto; //attempt1 text-align:center; //attempt2 两者都不起作用，尝试2只是水平对齐字符。但我也需要垂直对齐要实现这一点，有什么线索吗？跨浏览器水平对齐有点棘手在您提供的示例中，您可以使用： line-height:100px; 对于其他上下文，您需要使用javascript和绑定： $.fn.vAlignBlock = functi

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

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

两者都不起作用，尝试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");
    });
};

这是您修复它的方式：

首先在元素中换行字符：

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

我经常使用的一种技术是将您想要的东西包装在

块

元素的中心。它要求你知道你想要居中的东西的宽度和高度

如果不希望出于表示目的将无用元素添加到

DOM

，则可以将文本节点的

行高度

与容器的高度相匹配。缺点是，如果文本跨越两行，它将不可避免地破坏您的设计，因为

行高不正常
这是JSFIDLE

R
#DivMenu
{
位置：绝对位置；
-webkit边界半径：999px；
-moz边界半径：999px；
边界半径：999px；
行为：url（PIE.htc）；
背景：#ccc；
边框：2px实心#2e；
宽度：10%；
身高：12%；
}
#DIVP菜单
{
文本对齐：居中；
利润率最高：50%；
}

另一种方法是使用良好的旧线高度来创建垂直对齐。这样做的目的是使线的高度与线的高度相同。然后，文本对齐：水平方向居中。这适用于我测试过的所有主要浏览器，是最简单的解决方案
在本例中，路线特性与其他样式分开：
<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>


无标题文件
#DivMenu
{   
背景：#CCC；
边框：2px实心#2e；
宽度：100px；
高度：100px；
文本对齐：居中；
线高：100px；
}
R
垂直居中的另一个简单方法是删除“高度”属性，在顶部和底部添加填充，每个填充都是原始高度的一半。当然，对于水平居中，请使用文本对齐：
text-align: center;
padding-top: 6%;
padding-bottom: 6%;

你试过用谷歌搜索吗？你不是第一个遇到这个问题的人。潜水舱的高度是固定的还是液体的？它在工作。。但为什么你要硬编码的边缘顶端？它能兼容所有分辨率吗？@RajaprabhuAravindasamy：页边顶部与字符高度的一半成比例，因此它正确居中。只要字符本身具有相同的高度（例如，如果更改字体大小，则必须同时更改边距），它将适用于所有分辨率。这不是一个很好的解决方案，因为您依赖字体大小来使边距顶部正常工作，更不用说行高了。-0.5em
而不是px
中的显式测量值，有没有可能解决相对字体大小的问题？@JCOC611:有，但是我的要求你知道你想要居中的元素的宽度和高度，而你的要求你知道字体大小
，行高
，甚至显示
，边框。。。
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;
}

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

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


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

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