div 태그의 이미지 중앙에 배치
huanth21
내 이미지가 상자의 높이 중간에 있기를 원합니다. 이 내 코드 (이미지) (코드는 기사 아래에 있습니다)
I want (image) (폭 화면 <767px)
모든 화면에서 똑같기를 원합니다 (반응 형) 감사합니다
.question-answer {
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 29px;
border: 1px solid #C9C9C9;
cursor: pointer;
color: #303030;
}
.question-answer .question {
display: flex;
justify-content: space-between;
padding-right: 30px;
}
.question-answer .question .content {
padding: 0 34px;
text-align: left;
font-size: 14px;
font-weight: bold;
font-family: Open Sans;
letter-spacing: 0px;
color: #686868;
opacity: 1;
letter-spacing: 0px;
position: relative;
padding-right: 30px;
min-height: 57px;
display: flex;
align-items: center;
}
.question-answer .question img {
max-width: 24px;
max-height: 24px;
margin-top: 17px;
}
@media (max-width: 767px){
.question-answer .question .content {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 0px;
}
.faq-page .question-answer .question img {
}
}<div class="question-answer">
<div class="question">
<div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</div>
<img class="img-down" src="https://i.ibb.co/pRztJtW/arrow-circle-down-solid.png" alt="">
</div>
</div> 맛이 나다
글쎄, 당신은 단순히 flexbox로 할 수 있습니다 . 당신이해야 할 일은 display: flex;텍스트와 이미지의 부모 요소 에을 할당 한 다음 align-items: center;수직으로 정렬하는 것과 같은 플렉스 속성을 사용 하는 것입니다. 또한 margin-top이미지 요소 자체에서 를 제거하여 완벽하게 중앙에 배치해야합니다.
따라서 최종 코드는 다음과 같아야합니다.
.question {
display: flex;
align-items: center;
}
.question-answer {
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 29px;
border: 1px solid #C9C9C9;
cursor: pointer;
color: #303030;
}
.question-answer .question {
display: flex;
justify-content: space-between;
padding-right: 30px;
}
.question-answer .question .content {
padding: 0 34px;
text-align: left;
font-size: 14px;
font-weight: bold;
font-family: Open Sans;
letter-spacing: 0px;
color: #686868;
opacity: 1;
letter-spacing: 0px;
position: relative;
padding-right: 30px;
min-height: 57px;
display: flex;
align-items: center;
}
.question-answer .question img {
max-width: 24px;
max-height: 24px;
}
@media (max-width: 767px) {
.question-answer .question .content {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 0px;
}
}<div class="question-answer">
<div class="question">
<div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</div>
<img class="img-down" src="https://i.ibb.co/pRztJtW/arrow-circle-down-solid.png" alt="">
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
div 내부의 배경 이미지 중앙에 배치
- 2
한 번에 두 개의 DIV 중앙에 이미지 배치
- 3
div의 모든 이미지를 CSS 중앙에 배치
- 4
div 내부의 이미지를 중앙에 배치 할 수 없습니다.
- 5
css는 중앙과 중앙의 div에 배경이있는 범위를 배치
- 6
div에 2 개의 이미지가있는 경우 1 개의 이미지 만 중앙에 배치
- 7
많은 양의 div를 페이지 중앙에 배치
- 8
div 내에서 ul 중앙에 배치 (이미 페이지 중앙에 있음)
- 9
이 이미지를 div에 중앙에 배치하는 방법
- 10
DIV에서 더 큰 이미지 중앙에 배치
- 11
div 내에서 두 이미지 중앙에 배치
- 12
상단 중앙을 향한 div 뒤에 이미지 배치
- 13
이미지 중앙에 div를 배치하십시오.
- 14
다른 div의 이미지로 div를 중앙에 배치하는 방법은 무엇입니까?
- 15
div 내의 태그 내에서 이미지를 세로로 가운데 배치
- 16
오버레이와 이미지가있는 div의 중앙 하단에 텍스트 배치
- 17
동적으로 생성 된 div의 이미지 옆에 텍스트를 중앙에 배치합니다. jQuery
- 18
<div> 안의 모든 것을 페이지 중앙에 중앙에 배치하는 쉬운 방법
- 19
이미지 오른쪽 하단에 div 태그 배치
- 20
고정 너비 div 안에 스팬 태그 중앙에 배치
- 21
그리드 이미지 중앙에 배치
- 22
jquery를 사용하여 배경 이미지로 화면 중앙에 div를 중앙에 배치
- 23
Bootstrap을 사용하여 DIV 컨테이너로 그리드 중앙에 배치
- 24
Bootstrap을 사용하여 DIV 컨테이너로 그리드 중앙에 배치
- 25
페이지에 배경 이미지가있는 중앙 div
- 26
본문 태그 HTML CSS 내에서 여러 중첩 DIV 중앙에 배치
- 27
본문 태그 HTML CSS 내에서 여러 중첩 DIV 중앙에 배치
- 28
여백 : 0 자동; 부모의 div를 중앙에 배치하지
- 29
이미지로 div를 중앙에 배치 할 수 없습니다.
몇 마디 만하겠습니다