1

画像の横のテキストを片側または反対側 (左/右または上/下) の中央に配置するのは非常に簡単ですが、画像の左側に沿っていくつかのテキスト テキストを中央に配置し、下側に沿っていくつかのテキストを中央に配置する必要があります。

私はいくつかの解決策を試しましたが、それぞれのテキストを手動でセンタリングする必要があります。以下の私のソリューションでは、左側に垂直方向の中央揃えを手動で適用することを選択しました。これは、下部のテキストを水平方向に中央揃えにするには、テキストの長さに応じてパディングを変更する必要があるためです。

Javascriptはかなり簡単です。の線に沿った何か

element.style.paddingTop = (Img_Height/2 - Txt_Height/2);

しかし、純粋な CSS ソリューションがないとは信じがたいです。

以下のコードと同じ効果を達成するためのより良い方法はありますか? ここで実際の動作を確認してください: http://jsfiddle.net/Gamil/yteBY/

<div class="Preview">
    <p class="Preview" style="padding-top: 54px;">120 pixels high</p>
    <ul class="Preview">
        <li><img alt="big preview" src="http://placehold.it/160x120" /></li>
        <li>160 pixels wide</li>
    </ul>
</div>
<div class="Preview" style="padding-top: 30px;margin-left: 30px;">
    <p class="Preview" style="padding-top: 23px;">60 pixels high</p>
    <ul class="Preview">
        <li><img alt="big preview" src="http://placehold.it/80x60" /></li>
        <li>80 pixels wide</li>
    </ul>
</div>

CSS:

.Preview {
    float: left;
}
ul.Preview > li {
    list-style: none;
    text-align:center;
}
4

1 に答える 1

0

水平方向の位置合わせは確かに簡単ですが、垂直方向の位置合わせには少し注意が必要です。垂直方向の配置に関する良い記事はこちら

したがって、あなたの問題に関して、ここに最初の解決策があります: JSBIN この解決策は、私が行う css のように完璧ではありません:

.textC{
  position:absolute; 
  top:50%;
  left:50%;
}

これは、テキストが左と上から 50% から始まることを意味します。これはあなたが正確に望んでいるものではありません（私が理解したことから）。

少しの JavaScript を使用すると、テキストのサイズを取得し、画像の中心に正確に置き換えることができます。JavaScript を使用した JSBIN ソリューションを参照してください。

編集: これは、CSS のみを使用した新しいソリューションです:フィドル

CSSコードのスニペットだけを説明します

.block1{
  #position: absolute;
  display: table-cell;
  vertical-align: middle;
  top: 50%;
  left: 50%;
}

.block2{
  #position: relative;
  display: block;
  bottom: 50%;
  right: 50%;
  margin:auto;
}

基本的に位置に追加#すると、左上隅ではなくオブジェクトの中心が選択されます。

あなたの問題に対する正しい解決策を本当に教えてくれたこのウェブサイトに感謝します!

于 2012-11-27T14:13:51.070 に答える