html

Question

テキストの両側に行を作成するために、xhtml 1.0 strict にどのようなオプションがあるのか疑問に思っています。

セクション 1
----------------------- 次のセクション -----------------------
セクション 2

私はこのようないくつかの派手なことをすることを考えました：

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

または、上記には配置に問題があるため (垂直方向と水平方向の両方):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

これには配置の問題もありますが、この混乱で解決します。

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

アラインメントの問題に加えて、どちらのオプションも「曖昧」に感じます。たまたまこれを以前に見たことがあり、エレガントな解決策を知っていれば幸いです。

score 229 · Accepted Answer

どうですか：

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

このJSFiddleをチェックしてください。

vwまたは%を使用してレスポンシブにすることができます。

score 201 · Accepted Answer

幅と背景色を知らずにこれを解決する方法は次のとおりです。

構造

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

例: http://jsfiddle.net/z8Hnz/

二重線

二重線を作成するには、次のオプションのいずれかを使用します。

1) 行間の固定スペース

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

例: http://jsfiddle.net/z8Hnz/103/

2) 行間のカスタムスペース

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 5px; /* space between lines */
    margin-top: -2px; /* adjust vertical align */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

例: http://jsfiddle.net/z8Hnz/105/

SASS（SCSS）版

このソリューションに基づいて、誰かを助けることができるなら、「カラープロパティ付き」のSCSSを追加しました...

//mixins.scss
@mixin bg-strike($color) {

    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    > span {

        position: relative;
        display: inline-block;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: $color;
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }
}

使用例：

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

score 170 · Accepted Answer

フレックスボックスが解決策です:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

現在、すべてのブラウザーがサポートしており、必要に応じてそれぞれのベンダープレフィックスを追加することで、10 年前のブラウザーとの互換性を確保できます。とにかく優雅に劣化します。

score 102 · Accepted Answer

コンテナーの幅や背景色を知らなくても :before と :after を使用すると、これを実現できます。これらを使用すると、改行のスタイリングが向上します。たとえば、これを変更して、二重線、点線などを作成できます。

JSFiddle

CSS、および HTML の使用法:

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0px;
}
.hr-sect:before,
.hr-sect:after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 8px;
}

<div class="hr-sect">CATEGORY</div>

SCSS バージョン:

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;

    &:before, &:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin: 0 8px;
    }
}

score 53 · Accepted Answer

これを試して：

.divider {
	width:500px;
	text-align:center;
}

.divider hr {
	margin-left:auto;
	margin-right:auto;
	width:40%;

}

.left {
	float:left;
}

.right {
	float:right;
}

<div class="divider">
    <hr class="left"/>TEXT<hr class="right" />
</div>

jsFiddleでのライブプレビュー。

score 24 · Accepted Answer

私はちょうど同じ問題に遭遇しました。これを解決する1つの方法があります：

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>

テキスト要素に背景を設定しなくても機能します。つまり、背後にどんな背景があっても見栄えがします。

ここで試すことができます: http://jsfiddle.net/88vgS/

score 9 · Accepted Answer

更新:これは HTML5 を使用すると機能しません

代わりに、より多くのテクニックについてこの質問をチェックしてください: CSS チャレンジ、HTML を導入せずにこれを行うことができますか?

私line-height:0は自分のサイトguerilla-alumnus.comのヘッダーでエフェクトを作成していました。

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

別の良い方法は、http://robots.thoughtbot.com/にあります。

彼は背景画像とフロートを使用してクールな効果を実現しています

score 6 · Accepted Answer

<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

score 6 · Accepted Answer

CSS を使用でき、非推奨のalign属性を使用する意思がある場合は、スタイル設定されたフィールドセット/凡例が機能します。

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

フィールドセットの本来の目的は、フォームフィールドを論理的にグループ化することです。willoler が指摘したように、要素のtext-align: centerスタイルは機能しませんlegend。 align="center"は非推奨の HTML ですが、すべてのブラウザーでテキストを適切に中央揃えにする必要があります。

score 3 · Accepted Answer

2 年前の記事を更新しますが、1 つの要素と CSS のみを使用してこれらの状況に対処する方法を次に示します。

h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

そして、ここにそれをチェックするためのフィドルがあります: http://jsfiddle.net/sRhBc/ (境界線のために撮影された Google からのランダムな画像)。

このアプローチの唯一の欠点は、IE7 をサポートしていないことです。

score 3 · Accepted Answer

使うだけ

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

score 3 · Accepted Answer

<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

邪悪なハック...

score 2 · Accepted Answer

これは1歳ですが、私の最初の投稿です。ラッパーでの背景色の問題を回避するには、インラインブロックを hr で使用できます (誰も明示的には言いませんでした)。テキストはインライン要素であるため、正しく中央揃えにする必要があります。

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

score 2 · Accepted Answer

上記を見て、次のように変更しました。

CSS

.divider {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align:center;
    text-transform: uppercase;
}
.divider span {
    position:relative;
}
.divider span:before, .divider span:after {
    border-top: 2px solid #000;
    content:"";
    position: absolute;
    top: 15px;
    right: 10em;
    bottom: 0;
    width: 80%;
}
.divider span:after {
    position: absolute;
    top: 15px;
    left:10em;
    right:0;
    bottom: 0;
}

HTML

<div class="divider">
    <span>This is your title</span></div>

うまくいくようです。

score 2 · Accepted Answer

@kajic のソリューションを使用して、スタイリングを CSS に入れます。

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

次に CSS (ただし、n 番目のセレクターの使用は CSS3 に依存します):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

乾杯。

(PS tbody と tr、Chrome、IE、および Firefox では、少なくとも自動的に tbody と tr が挿入されます。そのため、@kajic のような私のサンプルには、必要な html マークアップを短くするためにこれらが含まれていませんでした。このソリューション2013 年現在、最新バージョンの IE、Chrome、および Firefox でテストされています)。

score 2 · Accepted Answer

デモページ

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

score 2 · Accepted Answer

h1真ん中にスパンをつけて使っています。

HTML の例:

<h1><span>Test archief</span></h1>

CSS の例:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

そのような単純な。

score 1 · Accepted Answer

古き良きFIELDSETは常にあります

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

score 1 · Accepted Answer

fieldsetを実行して、「凡例」要素（「次のセクション」テキスト）をフィールドの中央に配置して、設定のみを行うことができますborder-top。fieldset 要素に従って凡例がどのように配置されるかはわかりません。margin: 0px autoただし、トリックを実行するのは簡単かもしれないと思います。

例：

<fieldset>
      <legend>Title</legend>
</fieldset>

score 0 · Accepted Answer

CSS

.Divider {
width: 100%; height: 30px;  text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}

HTML

<div class="Divider">
    <div class="Side"><hr></div>
    <div class="Middle"><span>OR</span></div>
    <div class="Side"><hr></div>
</div>

タグ「span」内のテキストの長さに基づいて、クラス「side」および「middle」の幅を変更できます。「中央」の幅に「側面」の幅の 2 倍を加えた値が 100% であることを確認してください。

score 0 · Accepted Answer

なしでこれを達成でき<hr />ます。意味的には、CSS を使用して設計を行う必要がありますが、この場合はかなり可能です。

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

html - 水平罫線の中央に中央揃えのテキストを追加する

33 に答える 33

HTML

CSS

CSS

HTML

Related

Reference