11

この水平方向のルールを再作成したいと思います。

ここに画像の説明を入力してください

二重線がありますが、中央にある種のキャラクターや画像を配置する方法がわかりません。：beforeと：afterが使えるのではないかと思っていますが、この場合の使い方がわかりません。質問に答えるために、中央のキャラクターをキャラクターにしてみましょう。画像/アイコンは後でわかります。

アイデア？これが私の行のコードです：

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #444;
    border-bottom:1px solid #444;
    margin:25px 0px;
}
4

4 に答える 4

15

これが私が作成できたもののスクリーンショットです。jsfiddle.netで実際の動作を確認してください。

CSSのスクリーンショット

そしてここにCSSがあります：

body {
  background: #454545;
}

hr {
  font-family: Arial, sans-serif; /* choose the font you like */
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
  margin: 20px 10px; /* 20px space above/below, 10px left/right */
  overflow: visible;

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr:after {
  content: "§"; /* section sign */
  color: #999;
  display: inline; /* for vertical centering and background knockout */
  background-color: #454545; /* same as background color */
  padding: 0 0.5em; /* size of background color knockout */
}

/* opera doesn't render correctly. hide section sign */
x:-o-prefocus, hr:after {
  content: "";
}

節記号

節記号を追加するには、生成されたコンテンツを:beforeまたはで使用できます:after。残りのトリッキーな部分は、水平方向のセンタリング、垂直方向のセンタリング、および境界線のノックアウトです。

水平方向のセンタリング

text-align: center水平方向の中央揃えは、に追加しhrて生成されたコンテンツがであることを確認するのと同じくらい簡単ですdisplay: inline。

垂直方向のセンタリング

垂直方向のセンタリングには、インラインレンダリングに関する知識が少し必要です。1行のテキストによって消費される垂直方向のスペースは、によって決定されline-heightます。レンダリングされた文字のサイズよりもはるかに小さい場合でもline-height、文字はフルサイズで表示されますが、占めるスペースは。によって決定されますline-height。を使用line-height: 1pxすると、垂直方向のセンタリングが実現します。

国境をノックアウト

最後に、節記号の後ろの境界線をノックアウトするために私が知っている唯一の方法は、それらを別の色で覆うことです。この場合、ドキュメントの残りの部分と同じ背景色を使用して、混ざり合っているように見えます。適切な色を設定してbackground-colorから、左右を使用しpaddingて、節記号の両側のスペースを制御します。

境界線間の1pxのギャップ

また、私が設定していることに気付くでしょうbox-sizing: content-box。これは、境界線間のギャップが1pxになるようにするためです。（代替の、しかし同等の設定は次のようになりますbox-sizing: border-box; height: 3px;。）

Operaレンダリングのバグ

@cimmanonはいくつかのOperaレンダリングのバグを指摘したので、私は優雅に劣化し、節記号を表示しないことにしました。線だけを表示することは、まだ非常に整然としていてプロフェッショナルに見えると思います。これをOperaで実際に機能させたい場合は、次のような別のマークアップを使用できます<div class="hr"></div>（もちろん、それに合わせてCSSを更新します）。

于 2013-01-09T05:23:51.143 に答える
8

これが、シンボルがフォントではない場合に最も応答性が高く、軽量で最新のバージョンであると私が信じているものです。

スニペット

hr.hr--logo {
  border-top: solid #000 1px;
  margin: 50px 0;
}
hr.hr--logo:after {
  content: url( 'logogram.svg' );
  /* Controls the position of the logo */
  left: 50%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  /* Controls the whitespace around the symbol */
  padding: 20px;
  background: #fff;
}
<hr class="hr--logo">

于 2016-10-21T05:44:19.560 に答える
1

あなたはすでにいくつかのCSSを持っているので、背景画像と高さを与えるかもしれません：

hr {
    ... your css ...
    background:url(path to your image) no-repeat center;
    height:15px;
}
于 2013-01-07T18:50:41.630 に答える
-2

間抜けですが、スペースを壊さない2つの半幅HRと、それらの間の画像を試してみることができます。

<hr><img><hr>

タグ間に間隔や改行がない場合。

于 2013-01-07T18:47:06.957 に答える