DIV中的字符居中

我試圖在垂直和水平方向上在div中居中放置一個Character。
我已經使用了以下的CSS來實現。DIV中的字符居中

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

兩者都沒有工作，嘗試2只是水平對齊字符。
但我也需要垂直對齊。

My Code is here

任何線索，以實現這一目標？

來源

2012-12-21 Rajaprabhu Aravindasamy

您是否嘗試過Google？你不是第一個遇到這個問題的人。 – Vucko

div的高度是固定的還是流體的？ –

這是你如何解決它：

首先將字符包裝在一個元素中：

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

然後設置下列CSS：

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

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

Working example

來源

2012-12-21 18:59:51 JCOC611

它的工作..但你爲什麼硬編碼邊緣頂？它會在所有決議中兼容嗎？ –

http://jsfiddle.net/tutspack/A3kw4/32/ – underscore

@RajaprabhuAravindasamy：頁邊距與角色高度的一半成正比，所以它的居中位置正確。只要角色本身具有相同的高度（例如，如果更改字體大小，則必須更改邊距），它將適用於所有分辨率。 – JCOC611

跨瀏覽器水平對齊有點棘手。

在你已提供的示例的情況下，你可以使用：

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-21 18:59:06

我經常使用的技術是包你想集中在一個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; 
}

來源

2012-12-21 19:00:25

這裏的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-21 19:00:52 Moiz

一種不同的方法是使用好老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>

來源

2012-12-21 19:05:54 gillytech

依然爲垂直居中另一個簡單的想法是刪除height屬性和添加填充到頂部和底部，每其中一半是原來的高度。當然，對於水平對中，請使用文本對齊：

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

來源

2012-12-22 02:04:26

DIV中的字符居中

回答

相關問題