フレックスボックステーブルの水平と垂直のアラインメント

私は、他のカラムの隣に垂直にセンタリングされた1つのカラム（.calendar-arrow）を持つ反応性のあるテーブルベースのカレンダを作成しようとしています。フレックスボックステーブルの水平と垂直のアラインメント

静的なパディング値を使用せずに、月/日見出しを最初の列（日曜日列）に左揃えしようとしています。

私はHTMLを再構築することができます。

* { 
 
    box-sizing: border-box; 
 
} 
 
#event-calendar { 
 
    margin: 0 auto; 
 
    padding: 0 1%; 
 
    overflow: auto; 
 
} 
 
#event-calendar h1 { 
 
    padding-bottom: 15px; 
 
    text-align: left; 
 
} 
 
#event-calendar #calendar-left { 
 
    float: left; 
 
    border-right: 1px solid grey; 
 
    padding: 30px; 
 
    width: 50%; 
 
    height: 400px; 
 
} 
 
#event-calendar #calendar-right { 
 
    float: right; 
 
    padding: 30px; 
 
    width: 50%; 
 
    height: 400px; 
 
} 
 
#event-calendar .table .table-row .table-cell { 
 
    font-size: 2em; 
 
    color: black; 
 
} 
 
#event-calendar .table .table-header .table-cell { 
 
    color: grey; 
 
} 
 
.table { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    box-pack: justify; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 
.table .table-row { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 
.table .table-row .table-cell { 
 
    display: flex; 
 
    padding: 5px; 
 
    flex-flow: row nowrap; 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    word-wrap: break-word; 
 
    overflow-wrap: break-word; 
 
    word-break: break-word; 
 
    justify-content: center; 
 
} 
 
.table .table-row .event-on { 
 
    position: relative; 
 
} 
 
.table .table-row .event-on::before { 
 
    position: absolute; 
 
    z-index: -9; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border-radius: 100%; 
 
    width: 35px; 
 
    height: 35px; 
 
    content: ''; 
 
} 
 
.table .calendar-arrow { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    word-wrap: break-word; 
 
    overflow-wrap: break-word; 
 
    word-break: break-word; 
 
    justify-content: center; 
 
}

<section id="event-calendar"> 
 
    <div id="calendar-left"> 
 
    <div id="calendar-left-cont"> 
 
     <h1>December 2016</h1> 
 
     <div class="table"> 
 
     <div class="calendar-arrow"> 
 
      &larr; 
 
     </div> 
 
     <div class="table-row table-header"> 
 
      <div class="table-cell">S</div> 
 
      <div class="table-cell">M</div> 
 
      <div class="table-cell">T</div> 
 
      <div class="table-cell">W</div> 
 
      <div class="table-cell">T</div> 
 
      <div class="table-cell">F</div> 
 
      <div class="table-cell">S</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell event-on">1</div> 
 
      <div class="table-cell">2</div> 
 
      <div class="table-cell">3</div> 
 
      <div class="table-cell">4</div> 
 
      <div class="table-cell">5</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">6</div> 
 
      <div class="table-cell">7</div> 
 
      <div class="table-cell">8</div> 
 
      <div class="table-cell">9</div> 
 
      <div class="table-cell">10</div> 
 
      <div class="table-cell">11</div> 
 
      <div class="table-cell">12</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">13</div> 
 
      <div class="table-cell">14</div> 
 
      <div class="table-cell">15</div> 
 
      <div class="table-cell">16</div> 
 
      <div class="table-cell">17</div> 
 
      <div class="table-cell">18</div> 
 
      <div class="table-cell">19</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">20</div> 
 
      <div class="table-cell">21</div> 
 
      <div class="table-cell">22</div> 
 
      <div class="table-cell">23</div> 
 
      <div class="table-cell">24</div> 
 
      <div class="table-cell">25</div> 
 
      <div class="table-cell">26</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">27</div> 
 
      <div class="table-cell">28</div> 
 
      <div class="table-cell">29</div> 
 
      <div class="table-cell">30</div> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="calendar-right"> 
 
    <div id="calendar-right-cont"> 
 
     <h1>January 2017</h1> 
 
     <div class="table"> 
 
     <div class="table-row table-header"> 
 
      <div class="table-cell">S</div> 
 
      <div class="table-cell">M</div> 
 
      <div class="table-cell">T</div> 
 
      <div class="table-cell">W</div> 
 
      <div class="table-cell">T</div> 
 
      <div class="table-cell">F</div> 
 
      <div class="table-cell">S</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell">1</div> 
 
      <div class="table-cell">2</div> 
 
      <div class="table-cell">3</div> 
 
      <div class="table-cell">4</div> 
 
      <div class="table-cell">5</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">6</div> 
 
      <div class="table-cell">7</div> 
 
      <div class="table-cell">8</div> 
 
      <div class="table-cell">9</div> 
 
      <div class="table-cell">10</div> 
 
      <div class="table-cell">11</div> 
 
      <div class="table-cell">12</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">13</div> 
 
      <div class="table-cell">14</div> 
 
      <div class="table-cell">15</div> 
 
      <div class="table-cell">16</div> 
 
      <div class="table-cell">17</div> 
 
      <div class="table-cell">18</div> 
 
      <div class="table-cell">19</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">20</div> 
 
      <div class="table-cell">21</div> 
 
      <div class="table-cell">22</div> 
 
      <div class="table-cell">23</div> 
 
      <div class="table-cell">24</div> 
 
      <div class="table-cell">25</div> 
 
      <div class="table-cell">26</div> 
 
     </div> 
 
     <div class="table-row"> 
 
      <div class="table-cell">27</div> 
 
      <div class="table-cell">28</div> 
 
      <div class="table-cell">29</div> 
 
      <div class="table-cell">30</div> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell"></div> 
 
      <div class="table-cell"></div> 
 
     </div> 
 
     <div class="calendar-arrow"> 
 
      &rarr; 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

ペン：http://codepen.io/ourcore/pen/ENJOLO

ありがとう！

出典

2016-12-23 Mario Parra

矢印を中央に配置するには、実際のDOM要素の矢印の代わりに、絶対配置された擬似要素を使用できます。

HTMLから矢印を削除して、あなたのCSSに以下を追加：

div.table { 
    position: relative; 
} 
#calendar-left div.table::before { 
    content: "\2190"; 
    position: absolute; 
    left: -30px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 2em; 
} 
#calendar-right div.table::before { 
    content: "\2192"; 
    position: absolute; 
    left: -30px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 2em; 
}

revised codepen

あなたの一日 - ヘッダー行を左揃えされていない、あなたの月 - 年h1に理由があることですヘッダー行はjustify-content: centerを中心にしています。

.table-cell { 
    display: flex; 
    justify-content: center; 
}

これは、各列のデータを中央に配置しますが、h1には該当しません。

あなたはそれらの相互のコンテナの左端に沿って両方の要素を整列させる必要があります：

revised codepen

それとも、センタリング削除することもできます：矢印ソリューションの

revised codepen

出典

2016-12-23 00:51:36

感謝を。私はこの「justify-content：center」の効果に気付きましたが、意図的にそれを使用して1桁の上下を2倍にすることにしました。 –

カレンダーに列データをセンタリングしていますが、 'h1'は別のコンテナに存在するため、この配置に関連付けられていません。それらを左揃えする唯一の方法は、それらの相互のコンテナにあるでしょう。 http://codepen.io/anon/pen/RoOENG?editors=1100 –

私はあなたが何を意味するかを見ます。 2番目に、私は視覚的に整列していると思っていましたが、境界のためにこのように見えました。私は 'h1'を最初のセルと同じ' div'に配置しようとしましたが、それらは同じ行にあります。また、ハイパーリンクをナビゲートする必要があるため、矢印のDOM要素に固執する必要があります。 –

フレックスボックステーブルの水平と垂直のアラインメント

答えて

関連する問題