7

レスポンシブ Web サイトを構築しており、グリッド システムを使用しています。もちろん、グリッド ボックスには高さが設定されていません。それらは流動的です。それらの中に配置された画像は広告の高さを定義し、ビューポートの利用可能な幅に合わせてスケーリングされます

私がやろうとしているのは、画像の上にテキストを配置し、テキストを画像の中央に垂直に揃えることです。

垂直方向の配置に関する投稿をたくさん読んだことがありますが、レスポンシブ ボックスでそれを行うことに対処しているようには見えません。

この例では、グリッド システムを複製するために必要な要約された css のみを使用してフィドルをセットアップしました。2 つの灰色のダミー画像を使用しています。それらの上にテキストを配置し、テキストを垂直に揃えたい。これはどのように行われますか？何か案は？jqueryが絶対に必要でない限り、これをcssでのみ行うことを好みますが、cssだけでもできると思います。

http://jsfiddle.net/zjDuE/

<div class="grid">
<div class="row">
<div class="c6"><img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /></div>
<div class="c6"><img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /></div>
</div>
</div>
4

2 に答える 2

2

これは、ここで提示された適切な情報に基づいて、グリッドベースのレスポンシブ テンプレートのモジュール内で 2 行のテキストを中央に配置するための私のソリューションでした。本当にありがとう！

<ul>
<li class="v-centertext">
<div class="v-font140">Call Us (Toll Free):
<div class="v-font200">866-944-xxxx
</div></div>
</li>
</ul>

ここにCSSがあります：

.v-centertext {position: relative;display: table; text-align: center;}
.v-centertext div {display: table-cell; vertical-align: middle; text-align: center;}
.v-font140 {font-size: 140%; line-height: 1.2em;}
.v-font200 {font-size: 200%; line-height: 1.3em; color: #00679d;}
于 2013-11-26T18:34:16.690 に答える