기본적으로 다음 HTML / CSS가 있습니다.
.actionButton .parent {
display: table;
}
/*try to put image at the bottom*/
.actionButton img.bottom {
display: table-footer-group;
}
/*try to put div tag containing text on top*/
.actionButton .top {
display: table-header-group;
}<div class="actionButton section">
<button class="parent">
<img class="bottom" src="//dummyimage.com/100">
<div class="top">Click me!</div>
</button>
</div>버튼이 div 태그로 대체되면 주어진 CSS가 그룹의 형식을 올바르게 지정하여 텍스트가 이미지 위에 표시되도록합니다. 버튼에 대해서는 재현 할 수 없습니다. 누구든지 그 이유 또는 해결 방법을 설명 할 수 있습니까?
분명히 CSS 테이블이 <button>요소 에서 제대로 작동하지 않습니다 . 그러나 flexbox+ order속성은 잘 작동합니다. 또한 변경 <div>에 <span>로만 같이 분석 내용이 허용됩니다 <button>태그입니다.
.actionButton .parent {
display: flex;
flex-direction: column;
}
.actionButton .top {
order: -1;
}<div class="actionButton section">
<button class="parent">
<img class="bottom" src="//dummyimage.com/100">
<span class="top"> Click me! </span>
</button>
</div>인라인 대신 이미지에 CSS 유사 요소를 사용할 수도 있습니다.
.actionButton .parent:after {
content: url('//dummyimage.com/100');
display: block;
}<div class="actionButton section">
<button class="parent">
<span class="top"> Click me! </span>
</button>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다