1

ここに画像の説明を入力

動的テキスト コンテンツを含む div があります。テキストの量は、1 語から 5 語または 10 語 (大きなフォント) までさまざまです。現在、それは相対的に配置された親の下部と右側からいくらか絶対に配置されています。

ただし、コンテンツは動的であるため、場合によってはテキストが多くなり、テキストが親のメイン領域に入り込むとぎこちなく見えます。これは、現在、div の基準点が右下隅にあるためです。上図のように中心を基準に配置することは可能でしょうか？

親コンテナは通常どおりスタイル設定されていますposition: relative;。100% width and height

子コンテナーの CSS もかなり標準的です。

position: absolute;
bottom: 33%;
right: 33;

width、max-width、および min-width で遊んでみましたが、結果はまだ望ましくありません

4

1 に答える 1

2

これはどう？fiddle1 & fiddle2の下の CSS を使用して、これら 2 つのフィドルを比較します。

HTML

<div id="parent">
    <div id="anchor">
        <div id="child">
            <h1>Some text</h1>
        </div>
    </div>
</div>

CSS

#parent {
    position: relative;
    width: 100%;
    height: 100%;
}
#anchor {
    position: absolute;
    right: 33%;
    bottom: 33%;
}
#child {
    padding: 10px;
    margin-right: -50%;
    float: right;
}
于 2013-07-27T08:01:33.540 に答える