2017-12-31 286 views
1
<div class='card'> 
<div class='imgwrap'>...</div> 
<div class='cardr'> 
<a class='infor' href='...'>lorem ipsum</a> 
</div> 
</div> 

CSSグリッドセルの中に要素を垂直に配置する方法は?

.card{ 
    display:grid; 
    grid-template-columns: 54px auto; 
} 

.cardr{ 
    text-align:center; 
    background:silver; 
    align-items: center; // line a 
} 

.infor{ 
    display:inline-block; 
    border:1px solid #555; 
    padding:4px 14px; 
    border-radius:11px; 
    background:gold; 
    align-self:center; // line b 
} 

私は両方cardrの内側中心にすることがinforを必要としています。水平、私は成功せず、垂直方向にそれを中央にしたいline aおよび/またはline bを使用してtext-align: centerdisplay:inline-block

を使った作品を中心に

助けが必要ですか?

+1

[CSSグリッドのセンタリング](https://stackoverflow.com/questions/45536537/centering-in-css-grid)の可能な複製 –

答えて

2

これを行う1つの方法は、.cardr { display: flex; }.infor { margin: auto; }を追加することです。

このようにして.inforは、水平方向と垂直方向の両方に整列されます。

+0

@bonaca嬉しいことに、うれしかったです。情報がグリッドコンテナの孫であるため、タイトルを変更することができます。他のユーザーにとっては便利です。 –

関連する問題