2

ここで、CSS ディバイダーを使用して少しジレンマを抱えています。見てみましょう: http://jsfiddle.net/fVxC6/1/

.div-line {
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    width: 100%;
    float: left;
    height: 1px;
    display: inline-block;
    margin: -14px 0 25px 0;
}

私が達成しようとしているのは、テキストを中央に配置し、5px のパディングを適用することです。

テキストを中央に配置し、border-right と border-left を適用しようとしましたが、うまくいきませんでした (そして、デモに示されているように実際に望ましい結果にはなりませんでした。実際には 2 行がボーダートップですおよび border-bottom プロパティ)。

画像を使用せずにボーダートップとボトムを適用するよりも優れた解決策が必要であるとほぼ確信していますが、見つけることができませんでした..

更新：それは私が達成しようとしたことにいくらか近いですが、正確ではありません。おそらく私は十分に明確ではありませんでした。テキストを中央に配置したい - あなたのコードで何が達成されるか、また、左に5ピクセル、右に5ピクセルのように、それらの境界線を「プッシュ」したいので、それらの間にギャップが作成されます実際の中央揃えのテキストが配置されます

4

1 に答える 1

4

すべての要素をテキストとして見て、インラインで表示する必要があるため、私はあなたとは別のルートを取りました。

.div {
    width:960px;
    text-align:center;
}

.divider {
    font-size: 16px;
    font-weight: 400;
    background-color: #fff;
    padding-right: 10px;
        display: inline-block;
    width:10%;
    padding: 0 3px;
    vertical-align: middle;
}

.div-line {
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    width: 40%;
    height: 1px;
    display: inline-block;
    vertical-align: middle;
}

ここにフィドルがあります

于 2013-07-04T09:57:17.877 に答える