0

QtWebkit を使用してカードをレンダリングする Anki というフラッシュカード プログラムのテンプレートを作成しています。

3 つの要素のグループを中央の要素の中央に垂直に配置したいと思います。要素は動的なサイズであり、コンテンツに応じて拡大する必要がありますが、左側に配置されます。

これまでに 2 つのアプローチを試しました。1 つは、中央の要素を中央に配置し、その中央の要素内に上部と下部の要素を絶対的に配置することです。残念ながら、これは要素のグループ全体が各要素に応じて水平方向に成長するのではなく、中央の要素のコンテンツにのみ依存することを意味します。また、全体のサイズは、ページの高さと幅の 50% にしか達しません。

CSS:

.container {
    position: absolute;
    top: 0;
    bottom: 0;    
    height: 100%;
}

.left {
    background-color: green;
    left: 0;
    right: calc(100% / 3 * 2);
}

.left .middle {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%,-50%);
}

.left .top {
    position: absolute;
    bottom: 100%;
    left: 0;
}

.left .bottom {
    position: absolute;
    top: 100%;
    left: 0;
}

HTML:

<div class="container left">
    <div class="middle">
        <div class="top"> ödifj asduflsdfsk<br>j dkfj aölkdsjf df sdf sd f</div>
        dgs lk lj lkj lku öoiu ökj df sadlfjslk  dsfs df s
        <div class="bottom">dfffd  gfds gdsf f</div>
    </div>
</div>

私が試した2番目のオプションはフレックスボックスでしたjustify-content: center;が、これは中央の要素が中央に配置されておらず、要素のグループ全体のみが中央に配置されていることを意味します.

CSS:

.container {
    position: absolute;
    top: 0;
    bottom: 0;    
    height: 100%;
}

.center {
    background-color: blue;
    left: calc(100% / 3);
    right: calc(100% / 3);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container center">
    <div class="top"> ödifj asduflsdfsk<br>j dkfj aölkdsjf df sdf sd f</div>
    <div class="middle">
        dgs lk lj lkj lku öoiu ökj df sadlfjslk  dsfs df s
    </div>
    <div class="bottom">dfffd  gfds gdsf f</div>
</div>

繰り返しますが、3 つの要素をグループとして水平方向に中央に配置しますが、要素の左側に配置します。中央の要素に対して垂直方向に中央揃え。また、固定された幅や高さはありません。グループ全体の幅は、要素の中で最も広い幅にする必要があります。

https://jsfiddle.net/j136w6ab/

4

3 に答える 3

0

html テーブルを試してみませんか? 最小限のCSSで垂直方向のセンタリングに最適です

<div style="position:absolute; top:0; bottom:0; height:100%">

<table height="100%">
<tbody>
<tr>
    <td><!-- anything in here will vertically centre by default --></td>
</tr>
</tbody>
</table>

</div>

http://jsfiddle.net/6yody1fn/

見栄えを良くするには多くの調整が必要ですが、それはオプションかもしれません

于 2015-10-21T09:42:04.760 に答える
0

これを試すことができます：

<div class="col1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
</div>
<div class="col3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
</div>

CSS:

.col1,
.col2,
.col3 {
    position:absolute;
    top:50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width:33.3333333%;
}
.col1 {
    background:green; 
    left:0;
}
.col2 {
    background:red;
    left:33.33333333%;
}
.col3 {
    background: yellow;
    right:0;
}

ここで結果を確認できます: http://jsfiddle.net/d7pqbkrx/2/

于 2015-10-21T10:09:44.667 に答える