0

流動的なレイアウト内でテキスト要素を中央に配置しようとしています。つまり、サイズが<div>固定されていません。

水平方向と垂直方向の両方で子<div>を親の内側に配置するための非常に優れたソリューションを見つけました。それは次のように機能します: fiddle。(もともとこの投稿の 2 番目の方法から)<div>

ただし、フィドルに示されているように、Large Text要素は親の中心に垂直に正確に配置されているわけでは<div class="block">なく、子全体<div class="centered">が中心に配置されています。

2 つのテキスト要素を 2 つの別々の に分割し、要素<div>のみを含むものを中央に配置しようとしましたLarge Text。<div>ただし、2番目の包含small textが親から押し出されるため、機能しません<div class="block">

では、現在のセンタリング ソリューションをどのように変更すれば、要素のすぐ下に要素が含まれていても、Large Text要素が正確に親の中心に配置されるようにするにはどうすればよいでしょうか?<div class="block">small textLarge Text

4

2 に答える 2

0

これに対する答えをまだ探している場合は、デモを作成しました: http://dabblet.com/gist/3762377

もちろん、大きなテキスト (私のデモでは「.title」) には固定の高さを指定する必要があります。次に、.title の高さに等しい値で、負のマージンを使用して .box を上に引っ張ります。

マークアップは次のとおりです。

<div class="container">

    <div class="box">
        <h1 class="title">Title</h1>
        <p>Some text</p>
    </div>

</div>

CSS:

.container {
    display: inline-block;      
    text-align: center;
    }
    .container:before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        margin-right: -4px;
        }

    .box {
        display: inline-block;
        vertical-align: middle;
        width: 400px;
        margin-top: 70px; /* Height of .title. In this case .title's line-height. */
        }
    .title {
        display: block;
        margin: 0;
        padding: 0;     

        line-height: 70px;/* This property could be either height or top,bottom padding. */ 
        }
于 2012-09-21T16:24:06.857 に答える
0

vertican-alignvalignテーブルの HTML 属性の代わりとして CSS に導入されました。display:inline-block;表のセルは作成されず、まったく中央に配置されないことに注意してくださいvertical-align。< IE8 をあまり気にしない場合はdisplay:table、親と子で使用できます。display:table-cell

上記以外に、親の中心にすばやく簡単に配置する方法はありません。ただし、要素の高さがわかっている場合は、div で古い画像配置のトリックを使用できます。

<div>
    <p>Centred Text, Horizontal and Vertical</p>
</div>

そして、CSS

div {
    positon:relative;
    text-align:center;
    height:400px;
}

div p {
    position:relative;
    display:inline-block;
    height:30px;
    margin-top:-15px;
    top:50%;
    background-color:#cccccc;
}

フィドルの例

これがうまくいかない場合は、<p>絶対に配置することもできますが、親の text-align:center と子の display:inline-block の助けを借りずに水平方向に中央に配置する必要があります。

于 2012-08-20T23:42:34.890 に答える