0

divの中央にテキストを垂直方向に中央揃えできないようです。上部に浮き続けます。これが私のコードです：CSS

.dialer{
background-image: url('http://v4m.mobi/php/fb/images/close.png'); 
background-repeat: none;  
width: 100; 
height: 40; 
margin: 0 auto;
-moz-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
text-align: center;
}

HTML

<div class="dialer" align="center"><a href="http://v4m.mobi/php/fb/index.php"   
style="color: #ffffff; font-size: 18px; font-weight: bold; text-decoration: none; 
margin-top: 20px;">Close App</a></div>

助言がありますか？

ありがとうございました

4

4 に答える 4

2

これを試して

http://css-tricks.com/vertically-center-multi-lined-text/

于 2012-04-24T14:39:03.477 に答える
1

a タグから「margin-top: 20px」を削除し、次のように使用します。

.dialer {
    ...
    height: 40px;
}

.dialer a {
    line-height: 40px;
}

...しかし、これは、テキストが 1 行に収まることがわかっている場合にのみ機能します。

于 2012-04-24T14:02:27.257 に答える
1

に追加vertical-align: middle;し.dialerます。

margin: auto auto;高さと幅の値を固定することもできます。pxただし、 、%、または目的に合ったものなど、値の「タイプ」を指定する必要があります。

次のように相対的な配置を行うこともできます。

.dialer {
    ...
    position: relative;
    top: 47%;
}
于 2012-04-24T13:59:11.250 に答える
0

これが動作するフィドルです: http://jsfiddle.net/PvVr6/4/フィドル を更新したので、複数行のコンテンツでも動作します。

.dialer{
       ... 
       width: 100px;
       height: 40px;
       ...
       vertical-align: middle;
    }

    .dialer a {
        display: inline-block;  
    }
于 2012-04-24T14:10:02.103 に答える