Div1 안에 Div1과 Div2가 있습니다.
Div2에는 이미지와 가변 길이 텍스트가 있습니다. Div2의 너비를 자동으로 유지하고 Div1의 중앙에 배치하고 싶습니다.
아래에 설명 된대로 :
+-------------------------------------------------------------------+
| Div1 |
| +-------+--------------------+ |
| | Image | Some Test Text | <- Div2: Width:auto; |
| +-------+--------------------+ |
| |
+-------------------------------------------------------------------+
나는 그것을 만들려고하지만 배경 Div를 텍스트와 이미지로 덮는 문제에 직면하고 있습니다. 실제로 Div 높이와 너비를 자동으로 유지하고 싶지만 예상대로 작동하지 않습니다.
귀하의 질문을 올바르게 이해했다면이를 위해 css3 flexbox를 사용해야 합니다.
.text-and-image-holder {
justify-content: center;
align-items: center;
display: flex;
}
위의 CSS는 텍스트와 이미지가 서로에 대해 수직으로 가운데 정렬되는 작업 스 니펫에서 볼 수 있듯이 다음 레이아웃을 생성합니다.
+---------------------------------------+
| | Lorem ipsum dolor sit |
| | amet, lorem ipsum dolor |
| | sit amet, lorem ipsum |
| <img> | dolor sit amet, lorem |
| | ipsum dolor sit amet, |
| | lorem ipsum dolor sit |
| | amet, lorem ipsum |
+---------------------------------------+
.image-style {
margin-right: 20px;
}
.text-style {
font-size: 15px;
}
.text-and-image-holder {
justify-content: center;
align-items: center;
margin-bottom: 20px;
background: red;
padding: 20px;
display: flex;
}<div class="text-and-image-holder">
<img src="http://placehold.it/30x30" class="image-style">
<div class="text-style">Vertically Center Text Here</div>
</div>
<div class="text-and-image-holder">
<img src="http://placehold.it/30x30" class="image-style">
<div class="text-style">Very long text Vertically Center Here and lorem ipsum dolor sit amet.</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다