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

垂直方向のセンタリングのもう 1 つの簡単なアイデアは、height プロパティを削除し、上下にパディングを追加することです。それぞれ元の高さの半分です。もちろん、水平方向のセンタリングには text-align を使用します:

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

別の方法は、古き良きものを使用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-21T19:05:54.537 に答える
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は、テキスト ノードの をコンテナの高さに合わせることができます。欠点は、テキストが 2 行にまたがる場合、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 に答える