2017-12-31 189 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 및/또는 I 수직하지만 성공하지 않고 중심을 할 line b를 사용 text-align: centerdisplay:inline-block

를 사용

수평을 중심으로 작동합니다.

어떤 도움이 필요합니까?

+1

[CSS 그리드의 중심 맞춤] (https://stackoverflow.com/questions/45536537/centering-in-css-grid) –

답변

2

한 가지 방법은 .cardr { display: flex; }.infor { margin: auto; }을 추가하는 것입니다.

이렇게하면 .infor은 가로 및 세로로 정렬됩니다.

+0

@bonaca 도움이 되었 니 다행입니다. infor가 그리드 컨테이너의 손자이기 때문에 제목을 변경할 수 있습니다. 다른 사용자에게 도움이 될 것입니다. –

관련 문제