0

div を中央に配置し、左右に div で埋めようとしています。

中央の div は可変長のテキストになり、兄弟の div は利用可能なスペースを埋める行になります。これが私が想像するものです：

モックアップ

マークアップは次のとおりです。

<div class='heading'>
  <div class='lines'></div>
  <div class='heading-link'>
    <a>Link Text</a>
  </div>
  <div class='lines'></div>
</div>
<div class='heading'>
  <div class='lines'></div>
  <div class='heading-link'>
    <a>Really Long Link Text that is still centered</a>
  </div>
  <div class='lines'></div>
</div>

ベアボーンCSSは次のとおりです。

.lines {
  display: inline-block;
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
}

.heading {
  text-align: center;
  display: inline-block;
}

.heading-link {
  display: inline-block;
}

重要な点は、テキストの長さが可変であり、 div で左右の残りのスペースを埋め.heading-linkたいということです。.lines.heading-link

.heading-linkテキストの幅がわからないので、パーセンテージ幅を設定したくありません。テーブルベースのレイアウトを使用する必要がありますか? それとも単にインライン div ですか?

4

1 に答える 1

1

CSS テーブルを使用したソリューション

以下は、必要なものに近いかもしれません。

あなたのHTMLはそのままで良いです：

<div class='heading'>
    <div class='lines'></div>
    <div class='heading-link'><a>Link Text</a></div>
    <div class='lines'></div>
</div>

<div class='heading'>
    <div class='lines'></div>
    <div class='heading-link'> <a>Really Long Link Text that 
        is still centered</a></div>
    <div class='lines'></div>
</div>

次のCSSを試してください。

.heading {
    text-align: center;
    display: table;
    margin: 30px 0; /* for demo only */
}
.lines {
    display: table-cell;
    width: 48%; /* the exact value is not that critical... */
    border-top: 1px solid #2c2c2c;
    border-bottom: 1px solid #2c2c2c;
}
.heading-link {
    display: table-cell;
    white-space: nowrap; /* keeps the text from wrapping... */
    padding: 10px 20px; /* for demo only, as needed... */
}

仕組み

display: table親コンテナ.headingに適用してdisplay: table-cellから、子要素.linesとに適用し.heading-linkます。

テーブル セルの自動サイズ変更機能を利用するために、テーブル表示タイプを使用しています。

.heading-linkテキストは 1 行に収まると想定しているので、 white-space: nowrap. これにより、要素がテキストを含むように強制的.heading-linkに展開されます。必要に応じて、パディングを使用して空白を制御できます。

左右の.lines要素については、 with を 48% のように設定します。これにより、左右の.lines要素が強制的に同じ幅に計算され、 によって使用されたスペースの後に残っているスペースの半分になり.heading-linkます。

必要に応じて全体の幅を指定することもできます.heading。

デモ フィドル: http://jsfiddle.net/audetwebdesign/eyGdG/

于 2013-08-05T14:31:38.137 に答える