質問編集履歴

2 「■実現したい見た目」を追加しました。

jarinko-girl

jarinko-girl score 14

2020/07/09 12:18  投稿

flexを使った時に、要素の高さをそのままに文字を中央揃えにしたい。
縦線の長さはそのままで、
文字を横に中央揃えしたいのですが、どうしたらよいでしょうか?
![イメージ説明](9959f21016265113b5820d43b3466736.png)
■HTML
```<ul>
         <li><a href="">aaa<br>aaa</a></li>
         <li><a href="">bb</a></li>
         <li><a href="">cccc</a></li>
         <li><a href="">dddd</a></li>
       </ul>
コード
```
■CSS
```ここに言語を入力
ul{
           display: flex;
           li{
               border-right: solid 1px green;
               display: block;
               padding: 0 12px;
               vertical-align: middle;
               &:last-child{
                   border-right: none;
               }
               a{
                   text-decoration: underline;
               }
           }
       }
```
 
■実現したい見た目  
![イメージ説明](04723fe71648db5bd18846ac2c087e4a.png)  
 
いろいろ試して見たのですが、縦線の長さをそのままに、
文字を中央揃えすることがなかなかできません。
よろしくお願いいたします。
  • CSS

    13693 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1 HTMLを追加しました。

jarinko-girl

jarinko-girl score 14

2020/07/09 12:09  投稿

flexを使った時に、要素の高さをそのままに文字を中央揃えにしたい。
縦線の長さはそのままで、
文字を横に中央揃えしたいのですが、どうしたらよいでしょうか?
![イメージ説明](9959f21016265113b5820d43b3466736.png)
■HTML
```<ul>
         <li><a href="">aaa<br>aaa</a></li>
         <li><a href="">bb</a></li>
         <li><a href="">cccc</a></li>
         <li><a href="">dddd</a></li>
       </ul>
コード
```
■CSS
```ここに言語を入力
ul{
           display: flex;
           li{
               border-right: solid 1px green;
               display: block;
               padding: 0 12px;
               vertical-align: middle;
               &:last-child{
                   border-right: none;
               }
               a{
                   text-decoration: underline;
               }
           }
       }
```
いろいろ試して見たのですが、縦線の長さをそのままに、
文字を中央揃えすることがなかなかできません。
よろしくお願いいたします。
  • CSS

    13693 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る