부모 div 안에 2 개의 div를 수평으로 정렬하는 방법
Asem H
나는 이와 같은 유사한 질문이 이전에 요청되었다고 생각하지만 이러한 솔루션을 내 끝에서 작동시킬 수없는 것 같습니다.
그래서 나는 문제가있는 상자 의이 부분을 가지고 있습니다.
내가 원하는 것은 텍스트를 주변 div와 수평으로 정렬하는 것입니다. 지금 내 코드는 다음과 같습니다.
.cssAward {
width: 299px;
height: 54px;
margin: auto;
margin-bottom: 25px;
display: flex;
}
.cssImageBox {
float: left;
width: 60px;
height: 54px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.cssBoxText {
font-size: 18px;
color: #5e5e5e;
font-family: inherit;
font-weight: 300;
margin-left: 15px;
height: 54px;
width: 224px;
}
해당 섹션의 HTML은 다음과 같습니다.
<div class="cssAward">
<div class="cssImageBox">
<img class="cssBadge" src="images/celeb5star.png"/>
</div>
<div class="cssBoxText">
Multi-year top sales agent
</div>
</div>
텍스트를 배지와 수평으로 맞추려면 코드를 어떻게해야합니까? 미리 감사드립니다.
Swervo
cssBoxText도 플렉스로 만든 다음 일부 플렉스 속성을 적용하면 너무 많은 문제없이이 작업을 수행 할 수 있습니다.
.cssBoxText {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
또는 다음을 추가하는 경우 :
align-items: center;
align-content: center;
.cssAward에도 그렇게해야합니다.
Flex를 사용하면 레이아웃 문제를 매우 쉽게 해결할 수 있습니다. 그래도 사용하기로 약속해야합니다. flexbox를 float 및 vertical-align, text-align 등과 혼합하기 시작하면 예기치 않은 결과가 발생할 수 있습니다.
flexbox에서 읽을 가치가 있습니다. 정말 강력합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
DIV를 수평으로 중앙에 배치하고 다른 2 개를 측면에 정렬하는 방법
- 2
DIV를 수평으로 중앙에 배치하고 다른 2 개를 측면에 정렬하는 방법
- 3
DIV 내부에서 SPAN을 수직 및 수평으로 정렬하는 방법
- 4
동일한 라인 부트 스트랩에서 div를 수평으로 정렬하는 방법
- 5
형제 div를 부모 높이에 동적으로 수직으로 정렬하는 방법
- 6
두 개의 DIV를 수평으로 정렬하는 문제
- 7
Bootstrap Li 안에 2 개의 div를 넣는 방법?
- 8
하나의 <p> 안에 2 개의 다른 글꼴 크기를 수직으로 정렬하는 방법
- 9
div를 부모 div의 높이에 배치하는 방법
- 10
div 하단에 2 개 div를 플로팅하는 방법
- 11
부모 div에서 두 div (로고 및 메뉴)를 정렬하는 방법은 무엇입니까?
- 12
부트 스트랩 3 두 개의 Div를 수평으로 정렬
- 13
div를 수평으로 중앙에 배치하는 방법
- 14
자식 div를 부모 div의 크기로 만드는 방법
- 15
이 자식 div를 상대적으로 배치 된 부모의 맨 아래에 정렬하는 방법은 무엇입니까?
- 16
Django / Bootstrap 4 : 여러 부모 div 내부에 요소를 정렬하는 방법
- 17
컨테이너 내부에서 높이가 100 % 인 3 개 div를 가로로 정렬하는 방법
- 18
부모에 남아있는 공간을 (수평으로) 채우기 위해 div를 설정하는 방법은 무엇입니까?
- 19
React Native에서 부모의 '위에'자식 구성 요소를 수직 및 수평으로 정렬하는 방법은 무엇입니까?
- 20
값으로 2 개의 변수를 정렬하는 방법?
- 21
외부 div의 하단에 두 개의 내부 div를 표시하는 방법
- 22
반응 형으로 3 개 div를 정렬하는 방법
- 23
div의 동일한 basline에 h2와 p를 정렬하는 방법
- 24
열의 div 내부에 div를 설정하는 방법
- 25
부모 안에 div 그리드를 포함하는 방법
- 26
div를 다른 div 안에 중첩되도록 설정하고 자동 조정 가능한 높이와 무게로 부모 div를 채우는 방법
- 27
자식 div를 부모 div의 하단에 수직으로 정렬하고 자식을 부모 높이의 백분율로 설정합니다.
- 28
부모 div 내에서 2 개의 고정 너비 div를 나란히 가운데 정렬
- 29
CSS 내부의 요소를 2 개의 열로 정렬하는 방법
몇 마디 만하겠습니다