텍스트 상자를 Flexbox 열에 맞 춥니 다.

flex-direction : 이미지 열 아래에 텍스트를 놓으려고합니다. 중간에 부동산 재고량이 있지만이 방법을 알지 못합니다. 그것은 동일한 높이에 걸쳐 있지만 이미지 대신 텍스트입니다. 텍스트에 배경색을 추가하여 내가 무엇을하려고하는지 더 잘 이해할 수 있도록 도와줍니다.텍스트 상자를 Flexbox 열에 맞 춥니 다.

.test { 
 
display: flex; 
 
} 
 

 
.img1 { 
 
background-image: url(http://wallpaper-gallery.net/images/hd-model-wallpapers/hd-model-wallpapers-16.jpg); 
 
background-size: cover; 
 
margin: 40px; 
 
height: calc(100vh - 80px); 
 
background-position: center center; 
 
flex: 1; 
 
margin-right: 0px; 
 
margin-left: 40px; 
 
} 
 

 
.test2 { 
 
display: flex; 
 
flex-direction: column; 
 
justify-content: center; 
 
} 
 

 

 
.img2 { 
 
background-image: url(http://wallpaper-gallery.net/images/model-girl-hd-wallpaper/model-girl-hd-wallpaper-20.jpg); 
 
flex: 1; 
 
background-size: cover; 
 
margin-bottom: 20px; 
 
margin-right: 40px; 
 
margin-left: 40px; 
 
margin-top: 40px; 
 
height: calc(50vh - 120px); 
 
background-position: center center; 
 
width: 50vw; 
 
} 
 

 
.test2 p { 
 
flex: 1; 
 
margin-top: 20px; 
 
margin-bottom: 40px; 
 
margin-left: 40px; 
 
margin-right: 40px; 
 
font-size: 140px; 
 
height: calc(50vh - 120px); 
 
background-color: aqua; 
 
text-align: center; 
 
}

<div class="test"> 
 
<div class="img1"></div> 
 
    <div class="test2"> 
 
    <div class="img2"></div> 
 
    <p>ProntoToronto</p> 
 
    </div> 
 
</div>

출처

2017-05-19 RogerFedFan

가 미안 '돈 사용하려면 당신이하려고하는 것을 이해하지 못합니다. 오른쪽 이미지를 수평으로 정렬하고 싶습니까? 또는 파란색 상자에 텍스트를 세로로 정렬하고 싶습니까? 또는 다른 것? –

@Michael Coker는 수직 및 수평으로 파란색 상자의 가운데에 위치합니다. 나는 중심에있는 것을 볼 수 있도록 거기에 색을 칠했습니다. – RogerFedFan

https://jsfiddle.net/rxa7m0gs/는, 단락의 텍스트를 중심 display: flex; justify-content: center; align-items: center;

.test { 
 
    display: flex; 
 
} 
 

 
.img1 { 
 
    background-image: url(http://wallpaper-gallery.net/images/hd-model-wallpapers/hd-model-wallpapers-16.jpg); 
 
    background-size: cover; 
 
    margin: 40px; 
 
    height: calc(100vh - 80px); 
 
    background-position: center center; 
 
    flex: 1; 
 
    margin-right: 0px; 
 
    margin-left: 40px; 
 
} 
 

 
.test2 { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 

 
.img2 { 
 
    background-image: url(http://wallpaper-gallery.net/images/model-girl-hd-wallpaper/model-girl-hd-wallpaper-20.jpg); 
 
    flex: 1; 
 
    background-size: cover; 
 
    margin-bottom: 20px; 
 
    margin-right: 40px; 
 
    margin-left: 40px; 
 
    margin-top: 40px; 
 
    height: calc(50vh - 120px); 
 
    background-position: center center; 
 
    width: 50vw; 
 
} 
 

 
.test2 p { 
 
    flex: 1; 
 
    margin-top: 20px; 
 
    margin-bottom: 40px; 
 
    margin-left: 40px; 
 
    margin-right: 40px; 
 
    font-size: 140px; 
 
    height: calc(50vh - 120px); 
 
    background-color: aqua; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="test"> 
 
    <div class="img1"></div> 
 
    <div class="test2"> 
 
    <div class="img2"></div> 
 
    <p>ProntoToronto</p> 
 
    </div> 
 
</div>

출처

2017-05-19 23:10:00

텍스트 상자를 Flexbox 열에 맞 춥니 다.

답변

관련 문제