フレックスボックスは用紙内でセンタリングされています-css A4ページ

私はA4用紙をでHTML/CSSに書いていますが、センタリング（https://css-tricks.com/centering-css-complete-guide/#both-flexbox）に問題があります。フレックスボックスは用紙内でセンタリングされています-css A4ページ

現在の結果：

望ましい結果：

https://jsfiddle.net/askhflajsf/x7sjrzy4/

@page { 
 
    size: A4 
 
} 
 

 
.frontpage { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.frontpage > * { 
 
    text-align: center; 
 
} 
 

 
.frontpage footer { 
 
    align-self: flex-end; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css" rel="stylesheet"/> 
 
<body class="A4"> 
 
    <section class="sheet padding-10mm frontpage"> 
 
    <h1>Logo centered horizontally/vertically</h1> 
 
    <footer>Footer centered horizontally but pushed to the bottom vertically</footer> 
 
    </section> 
 
</body>

出典

2017-08-18 Mark Boulder

問題はフレックスコンテナがflex-direction: row（デフォルト）に設定されていることです。

これは、フレックスアイテムが水平に配置されていることを意味し、2つの列を作成します。各項目の内容は、兄弟の列スペースに侵入することはできないため、ページ上で水平にセンタリングすることはできません。

より良い方法は、flex-direction: columnを使用することです。アイテムを垂直方向に整列させます。

次に、justify-content: space-betweenを使用して、アイテムを上部と下部にピン止めします。

次に、フレックスアイテムとして機能する単一の見えない擬似要素を追加します。これにより、見出しが垂直方向の中心に移動します。

@page { 
 
    size: A4 
 
} 
 

 
.frontpage { 
 
    display: flex; 
 
    justify-content: space-between; /* ADJUSTED */ 
 
    align-items: center; 
 
    flex-direction: column;   /* NEW */ 
 
} 
 

 
.frontpage::before {    /* NEW */ 
 
    content: ''; 
 
} 
 

 
.frontpage > * { 
 
    text-align: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css" rel="stylesheet"/> 
 
<body class="A4"> 
 
    <section class="sheet padding-10mm frontpage"> 
 
    <h1>Logo centered horizontally/vertically</h1> 
 
    <footer>Footer centered horizontally but pushed to the bottom vertically</footer> 
 
    </section> 
 
</body>

revised fiddle demo

詳細情報：

Center and bottom-align flex items

出典

2017-08-18 16:11:43

それくぎ付け - あなたにマイケルをありがとう！ –

フレックスボックスは用紙内でセンタリングされています-css A4ページ

答えて

関連する問題