0

このコードは、block、text、block、text、block、textのシーケンスを生成します。ただし、テキストをdivの中央に垂直に配置できないため、隣に配置されているように見えます。ボックスの中央を垂直に。何かアドバイス？



    <div style="position: absolute; right: 0; top: 0; text-align: right;">
    <span style="display: inline-block; width: 15px; height: 15px; background: #2880BB"></span>                                     
    <span style="display: inline-block">Created   </span>                                            
    <span style="display: inline-block; width: 15px; height: 15px; background: #7FC31B"></span>
    <span style="margin-left: 5px;">Won   </span>
    <span style="display: inline-block; width: 15px; height: 15px; background: #FD2A2F"></span>
    <span style="margin-left: 5px;">Lost </span>
    </div>
4

7 に答える 7

1

代替ソリューション：

<div style="position: absolute; right: 0; top: 0; text-align: right;">
    <span style="border-left: 15px solid #2880BB; padding-left: 5px;">Created</span>                                            

    <span style="border-left: 15px solid #7FC31B; margin-left: 5px; padding-left: 5px">Won</span>

    <span style="border-left: 15px solid #FD2A2F; margin-left: 5px; padding-left: 5px">Lost</span>
</div>​

jsFiddle： http: //jsfiddle.net/w2wVc/1/

于 2012-09-05T17:47:49.657 に答える
0

-veテキストに余白を使用してみてください。これがライブデモです。

于 2012-09-05T17:52:39.853 に答える
0

私の提案は、すべて<span>とそのボックスを1つに入れてからdiv、すべての右をクリアすることです。div

clear: right
于 2012-09-05T17:54:27.683 に答える
0

line-height高さの代わりに、テキストを垂直方向に中央揃えするために使用できます。このコードをチェックしてください：

HTML：

<div class="vertical">
    Hello
</div>

CSS：

.vertical {line-height: 50px; border: 1px solid #f00;}

フィドル： http： //jsfiddle.net/rv8pq/

于 2012-09-05T17:33:14.807 に答える
0

私はあなたのcssでposition：relativeとtop：2pxを使用しました。必要に応じて上部のピクセル値を変更します。

<div style="position: absolute; right: 0; top: 0; text-align: right;">
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #2880BB"></span>                                     
<span style="display: inline-block">Created   </span>                                            
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #7FC31B"></span>
<span style="margin-left: 5px;">Won   </span>
<span style="display: inline-block; position:relative; top:2px; width: 15px; height: 15px; background: #FD2A2F"></span>
<span style="margin-left: 5px;">Lost </span>
</div>
于 2012-09-05T17:49:50.677 に答える
0

私はこれをCSSで何度も試しましたが、運がなかった（クロスブラウザーのサポートが良好でした）。私はそれをいくつかのJqueryで動作させることができました。

http://jsfiddle.net/EebmV/1/

あなたは古い学校に行ってテーブルを使うことができます。テーブルセルは常に垂直方向の配置に使用されています。

アップデート：

正しく参照されたJqueryライブラリで再保存されました。

于 2012-09-05T17:57:40.573 に答える
0

divをとして、spansをとして設定したdisplay:tableので、テーブルモードのように display:table-cell設定できます。vertical-align

http://jsfiddle.net/w2wVc/10/

于 2012-09-06T03:28:46.553 に答える