css - 相対 % サイズ変更で別の DIV のテキストを (垂直方向に) センタリングする際の問題

Question

免責事項:を使用せずに相対サイズを使用して全画面グ​​リッド レイアウトを生成しているため、これが重複しているとは思いませんpx。

問題:この jsFiddle http://jsfiddle.net/X3ZDy/73/には、均等に配置された 4 つのボックスがあります。それらは画面幅全体に広がり、正方形のままになるように設計されています。その中に含まれているのは、いくつかのサンプル スクエア DIV (40% x 40%) です。lblテキストラベルを水平方向および垂直方向の中央に配置するのに苦労していますbbl。

table-layout私が見た (そして試した) すべての例は、ラベルの高さを知る必要があるか、ブラウザーに制限されたトリックを使用しているため、機能しません。フィドルに従って、すべての相対的なサイズでこれを行う必要があります。

誰でも手伝ってもらえますか? 純粋な CSS (JS なし) ソリューションを備えたすべてのブラウザーで動作するには、これが必要です。div 内のテキストを垂直方向に揃えるのが非常に難しいように見えることに驚いています。テキスト ラベルとしてブロック要素を使用するかインライン要素を使用するかは気にしません。

私は TABLE ソリューションを探しているわけではないことに注意してください。これは、動作する jsFiddle を必要とする DIV & CSS パズルです。

詳細: ご回答いただきありがとうございます。ただし、将来のポスターについては、 (width == padding-bottom) が私の DIV を正方形にする魔法であることに注意してください。これはグリッド レイアウト システムの鍵なので、それを維持する必要があります。

更新 相対的なサイズと固定された高さで作業するのはかなりトリッキーですが、最終的に問題に対する答えを見つけたと思います (以下)。

Answer 1

自虐しないでください。let IE7 go... :) (これによると、あまり多くの人が使っていません。)

私はこれを 2 つのアプローチで試しdisplay: tableてみline-heightました。残念ながら、私は PC にアクセスできないので、Mac 10.8.1 上の Chrome 25.0.1365.1 canary、FF 18、および Safari 6.0、iOS 6.0.1 Safari、および iOS Simulator 5.0 および 5.1 Safari でのみテストされています。 .

display: tableiOS Simulator 5.0 および 5.1 では、このアプローチには問題があり、テキストが垂直方向に中央揃えされていません。

quirksmodeによると、display:tableメソッドは IE8 以降と互換性があるはずです。理論的には、line-height メソッドはIE 6/7 と互換性がある可能性があります。

各正方形内に中央のボックスを作成するために、スタイルを次のように設定.box6しposition: relativeて変更しました。.bc

.bc  {
    position:absolute;
    top: 30%;
    bottom: 30%;
    left: 30%;
    right: 30%;
    overflow: hidden;
}

.bc各アプローチは、要素内に静的な高さを持つ非常に背の高いコンテナーを作成します。静的な高さの正確な値は任意であり、含まれるコンテンツよりも高くする必要があります。

display: tableメソッドは.bblと.bbl .lblスタイルを次のように変更します。

.bbl {
  display: table;
  height: 500px;
  padding-top: 50%;
  margin-top: -250px;
  background-color: blanchedalmond;
  width: 100%;
}

.bbl .lbl {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

line-heightメソッドの HTML は次のとおりです。

<div class="bc">
    <div id="line-h-outter">
        <span id="line-h-inner">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</span>
    </div>
</div>

CSS:

#line-h-outter {
  line-height: 500px;
  vertical-align: middle;
  margin-top: -250px;
  padding-top: 50%;
}

#line-h-inner {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

http://jsfiddle.net/X3ZDy/93/

Answer 2

現実には、HTML 内で流動的な垂直方向の配置を持つ唯一のタグはテーブル セルです。

CSSには、あなたが望むものを手に入れるものは何もありません。今日ではありません。

要件が次の場合: 1. すべてのブラウザーで動作する 2. 滑らかな高さ 3. 垂直センタリング 4. スクリプトなし 5. テーブルなし 6. 数年後ではなく、今日のソリューションが必要

1 つのオプションが残されています。 1. 要件の 1 つをドロップします。

そうでなければ、この「パズル」は完成できません。そして、これがあなたの要求に対する唯一の完全に受け入れられる答えです.

...この特定の課題で無駄になった時間のすべての給料を得ることができれば:)

Answer 3

タイトルは不明の中心にある必要があります ;-)

テーブルを使用して例を更新しました：http：//jsfiddle.net/uWtqY/テキストは、テーブルを使用して説明したボックス内に配置されますが、これは望ましくありません。

次のようなテーブルを追加しました：

<table width="100%" height="100%"><tr><td>One line</td></tr> </table></div>

中身 <div class="lbl">

クロスブラウザのサポートのためだけに。

編集

いくつかの調査を行った後、実際にパーセンテージ内の要素をv-alignすることは非常に困難です。多くのことを試しましたが、あなたのコードがそれらすべてのデザインに適合するかどうかはわかりません。つまり、最初に垂直方向の配置を作成してから、パーセンテージで試してみる必要があるかもしれません。この分野での経験から、良いアプローチは内部要素から設計を開始し、複雑さが増すと外に出るということを学びました。したがって、すべてにパーセンテージを含めることは、最良の実装ではない可能性があります（そして、モバイルデバイスに関してはそうではありません）。

編集2

私の仕事のパートナーの何人かとHTMLの分野の本当にオタクと統合した後、答えは明白でした。<IE7をサポートし、テーブルまたはゴースト要素またはスパンを使用してそれを行うか、いくつかの投稿で説明されているすべての手法を使用し、>=IE7をサポートすることができます。別のオプションは、ブラウザごとに特定の構造を使用することです。

私が思うリンクはそれをそのまま説明し、素敵なタイトルを持っています（基本的にあなたが必要とするものです）：

->未知の中心

最高を願っています。

PS。参照用のリンク：

• http://web.archive.org/web/20091017204329/http://www.zann-marketing.com/developer/20050518/vertically-centering-text-using-css.html

• http://css-tricks.com/vertically-center-multi-lined-text/

• http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

それが役立つかどうか教えてください

Answer 4

今日、私は同様の問題に出くわしました-以前に幅を設定した正方形のdivの子要素を垂直方向と水平方向の両方で中央に配置します(パディング技術を使用して正方形にします)。縦横比を維持しながら画像に使用する必要がありましたが、子を任意のターゲット要素に変更するのは簡単です。

この状況では、line-height、margin/padding、または display:table-cell の回避策は適していません。しかし、を使用した解決策がありmargin: autoます。

HTML:

<div class="squareContainer>
    <div class="contentWrapper">
        <img class="imagePreview" alt="Image preview" src="//URL.jpg">
    </div>
</div>

CSS:

div.squareContainer {
    position: relative;
    box-sizing: border-box;
    height: 0;
    padding-bottom: 25%;
    width: 25%;
}
div.contentWrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
img.imagePreview {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;  /* This is the important line */
    max-height: 90%;
    max-width: 90%;
}

役立つリソース:

http://jsfiddle.net/mBBJM/1/

http://codepen.io/HugoGiraudel/pen/ucKEC

それが役立つことを願っています!

Answer 5

「スペーサー」クラスを利用するようにcssを更新しました。「bc」divの前、色付きのボックス内に配置されます。これにより、あなたが要求したと思われる効果が得られました。

html:
<div class="rgCol boxCol box6" style="background-color:lightgray">
        <div class="spacer"></div>
        <div class="bc">


css
.spacer {width:100%;padding-bottom:30%;display:block; }

スペーサーを 30% 下にパディングしてから、「bbl」div の絶対左位置を (2% から) 30% に移動しました。ブランチデレモンボックスは、その形とサイズを保持しています。

http://jsfiddle.net/X3ZDy/37/

Answer 6

変なことをすることなく、これを簡単に解決できます（おそらくいつかCSSボックスモデルを修正するでしょうが、それまで）

<table>
<tr>
<td width="50" height="50" align="center" valign="middle">text</td>
</tr>
</table>

それだけです。幅と高さを選択し、div にドロップして、良いと呼びます。

テーブルを使用しないという考えは、非常に貧弱なガイドラインであり、自虐的です。

Answer 7

こんな感じですか？

<div class="mycontainer">
  <div class="rgRow">
    <div class="rgCol" style="background-color:pink">
      <div class="boxCol">BOX1</div>
    </div>
    <div class="rgCol" style="background-color:lightgray">
      <div class="boxCol">
        <div class="boxLabel">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</div>
      </div>
    </div>
    <div class="rgCol" style="background-color:maroon">
      <div class="boxCol">
        <div class="boxLabel">One liner</div>
      </div>
    </div>
    <div class="rgCol" style="background-color:yellow">
      <div class="boxCol">BOX4</div>
    </div>
  </div>
</div>


.mycontainer
{
    background-color: #000000;
    display: inline-table;
}

.rgRow
{
    width: 100%;
    display: table-row;
}

.rgCol
{
    width: 25%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.boxCol
{
    display: inline-block;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.boxLabel
{
    text-align: center;
    vertical-align: middle;
    background-color: blanchedalmond;
    overflow: hidden;
    margin: 2%;
    width: 96%;
    height: 96%;
}