이미지 위에 아이콘을 배치 할 수있는 사이트 빌더 용 요소를 만들려고합니다.
왼쪽 상단 :
-------
|* |
| |
-------
오른쪽 상단:
-------
| *|
| |
-------
다음 HTML이 있습니다.
<article class="col-md-4 project selected-column" contenteditable="true">
<figure class="member square">
<div>
<aside>
<i class="sub_icon fa fa-asterisk circle" style=" font-size:18px; line-height:21px;"></i>
</aside>
<div class="image-container square-container">
</div>
<img class="img-responsive" style="margin:auto;" src="http://placehold.it/250x250&text=Afbeelding">
</div>
<figcaption>
<h4 style="text-align:center;" contenteditable="true">Voer hier uw naam in</h4>
<p style="text-align:center; font-style:italic;;" contenteditable="true">Voer hier uw subtitel in</p>
<p style="text-align:center;" contenteditable="true">Voer hier uw titel in</p>
</figcaption>
</figure>
</article>
atm이있는 CSS :
figure>div{
display:table;
margin:0 auto;
}
aside {
position:absolute;
width:40px;
height:40px;
background-color:#fff;
text-align:center;
}
i {
position:relative;
top: calc(50% - 10px)
}
위의 코드는 아이콘 컨테이너를 이미지의 왼쪽 상단에 배치하여 작업의 절반처럼 보였습니다. 하지만이 CSS와 HTML에서는 아이콘 컨테이너를 오른쪽 위에 놓을 수 없습니다.
아이콘을 왼쪽 상단과 오른쪽 상단에 배치 할 수 있도록이 HTML의 스타일을 지정하는 방법은 무엇입니까?
figure>div{
display:table;
position:relative; /* new */
margin:0 auto;
}
aside {
position:absolute;
width:40px;
height:40px;
right:0; /* new */
background-color:#fff;
text-align:center;
}
업데이트 된 바이올린입니다
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다