1

流動的なパーセンテージ ベースのコンテナーがあり、その中に div があり、タイトルが含まれています。ブラウザーのサイズが変更されたり、ビューポートが変更されたりするたびに、このタイトルが常にこのコンテナーの中央に垂直に配置されるようにします。JavaScript を使用せずにこの垂直方向の再配置を行うことは可能ですか?

<div class="fluid-container">
    <div class="meta">Title</div>
</div>
4

3 に答える 3

3

これが私のお気に入りの方法です。この目標を達成するために、2 つのヘルパー クラスを使用します。

.valign:after {
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
    content: '';
}
.valign > .valigned {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

何かを垂直方向に配置する必要がある場合は、valignクラスを親とvaligned実際の要素に追加するだけです。このような：

<div class="fluid-container valign">
    <div class="meta valigned">Title</div>
</div>

http://jsfiddle.net/dfsq/MQMEZ/

于 2013-02-16T18:03:23.243 に答える
0

「タイトル」タグの高さの高さを知っている場合、またはで設定できる場合はline-height、height次のようにすることができます。

.fluid-container {
  position: relative;
}
.fluid-container > .meta {
  width: 100%;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}

例: http://jsfiddle.net/Yjy5C/2/

于 2013-02-16T17:55:14.010 に答える
0

line-height、inline-block、およびを(乱用) 使用vertical-align:middleして、目的の効果を得ることができます。すべてのまともなブラウザで動作します。（私はかつてこのテクニックをここで見つけました）

.fluid-container {
    line-height: 8em; /* some abundant value, around the max height */
}
.fluid-container > div.meta {
    vertical-align: middle; /* center… */
    display: inline-block; /* …like text */
}
于 2013-02-16T18:06:59.583 に答える