0

高さをパーセンテージで表したdivのテキストを垂直方向に中央揃えにします。私が使用しているコードはこれです。

CSS-

.div{
    position: fixed;
    left: 0px;
    border-radius: 10px;
    height: 6%;
    width: 20%;
    transform: translate(-10px,0px);
    -ms-transform: translate(-10px,0px);
    -webkit-transform: translate(-10px,0px);
    -o-transform: translate(-10px,0px);
    -moz-transform: translate(-10px,0px);
    z-index: 10
}
.div span {
    text-align: center;
    font: 20px/100% Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #fff;
    display: block;
    vertical-align: middle;
}

HTML-

<div class="div"><span>This is some text.</span></div>

これは機能していません。助けてください。

4

2 に答える 2

1

親 div 表示をテーブルとして使用し、子 div 表示をテーブルセルとして使用するか、1 行のテキストを使用してから line-height プロパティを使用する場合は別のアプローチを使用できます。

テーブルセル表示のCSS フィドルを参照

.div{
position: fixed;
left: 0px;
border: 1px solid black;
border-radius: 10px;
height: 50%;
width: 20%;
z-index: 100;
display: table;
}
.div span {
text-align: center;
font: 20px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
display: block;
vertical-align: middle;
display: table-cell;
}

行の高さを指定した Cssフィドルを参照

于 2012-12-29T07:18:21.533 に答える
0

line-heightそのdivの実際の高さに等しいdivにaを追加してみてください。

だからあなたが持っているなら

<div class = "foo"><span>Blah</span></div>

あなたのスタイルは次のようになります

.foo {height:5em; line-height:5em;} span {font-size:1em;}

必要に応じて、詳細な説明と他の例。

于 2012-12-29T07:17:45.020 に答える