質問内容
提示画像ですが以下のtest文字を縦長にしてかつ文字をその枠の中心に持っていきたいのですがこれをするにはどうしたらいいのでしょうか？<!-- 曜日 --> 部です。
調べたこと、試したこと
参考サイトを参考にalign-items,vertical-alignを実験
制約
１，borderも使いたい。
環境
HTML5 ,SCSS
ブラウザ google chrome
参考サイト
縦横に設定：https://fromkato.com/webdev/css/properties/vertical-align
画像
index.html
html
1<!DOCTYPE html>2<html>3 <head>4 <title>test</title>5 6 <link rel="stylesheet" type="text/css" href="style.css">7 </head>8 9 <body>10 11 <!-- 見出し -->12 <div class="tab">13 14 <h3 class="year">2023</h3>15 16 <div class="title">17 <h3>朝・午前 1</h3>18 <h3>朝・午前 2</h3>19 <h3>朝・午前 3</h3>20 <h3>朝・午前 4</h3>21 22 <h3>夜間・午後 1</h3>23 <h3>夜間・午後 2</h3>24 <h3>夜間・午後 3</h3>25 <h3>夜間・午後 4</h3> 26 </div>27 </div>28 29 <!-- 曜日 -->30 <div class="date"> 31 <h3>test</h3>32 <h3>test</h3>33 <h3>test</h3>34 </div>35 </body>36 37 <script src="script.js"></script>38</html>39
style.scss
scss
12$border-set: solid #888; //枠3$year-width: 250px;4body 5{6 overflow-x: scroll;7 overflow-y: scroll;8}9 10 11 12/* ################################## 見出し ################################## */13.tab 14{15 text-align: center;16 display: flex;17 width: 50000px;18}19 20//年21.year 22{23 width: $year-width;24 border: $border-set;25 margin: 0;26}27 28.title 29{30 display: flex;31}32 33.title > h3 34{35 margin: 0;36 width: 800px;37 border: $border-set;38}39 40/* ################################## 曜日 ################################## */41.date 42{43 //text-align: center;44 width: $year-width;45 justify-content: center;46 display: flex;47 48}49 50 51 52.date > h3 53{54 width: 100%;55 border: $border-set;56 margin: 0;57 text-align: center;58 height: 100px;59}60
0 コメント