h1
이 작업을 수행하는 가장 좋은 방법 은 무엇입니까?의 기준선에 이미지를 정렬하려고합니다 .
*{
box-sizing: border-box;
margin: 0;
padding: 0;}
html,body, .header{
height: 100%;
background-color: peachpuff;
}
.header{
display: grid;
grid-template-columns: [left-gutter] 1fr [title] 4fr [image] 8fr [right-gutter] 1fr;}
.header__title{
grid-column: title;
align-self: center;
}
.header__image-wrapper{
grid-column: image;
align-self: baseline;
}
<header class="header">
<h1 class="header__title">Title</h1>
<div class="header__image-wrapper">
<img src="https://source.unsplash.com/200x200/?water" alt="random" />
</div>
</header>
당신과 함께 정렬 그리드 항목 수 없습니다 baseline
때문 baseline
에 대한 유효한 값이 아닙니다 align-self
속성 또는 align-items
에서의 경우 CSS 그리드의 속성입니다. 그리드의 경우이 두 속성의 유효한 값은 start | end | center | stretch
입니다. 플렉스 항목을 align-self: baseline
또는로 정렬 할 수 있습니다 align-items: baseline
.
추가 align-self: end
로 .header__title
행의 끝에서 텍스트를 정렬하고 제거하는 요소 100%
에서 폭 html
.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
.header {
background-color: peachpuff;
height: 100%;
}
.header {
display: grid;
grid-template-columns: [left-gutter] 1fr [title] 4fr [image] 8fr [right-gutter] 1fr;
}
.header__title {
grid-column: title;
align-self: end;
margin: 0;
}
.header__image-wrapper {
grid-column: image;
}
<header class="header">
<h1 class="header__title">Title</h1>
<div class="header__image-wrapper">
<img src="https://source.unsplash.com/200x200/?water" alt="random" />
</div>
</header>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다