css에서 display: block안에 내용을 중앙정렬을 좀 하고싶어요..
본문
구현하고 싶은것은
아래와 같은 기능이구요
캐러셀로 하는데요
기능적으론 문제없이 잘 돌아갑니다!!
문제는 지금 모양을 넣고 있는데 컨트롤쪽을 아무리 해도 잘 안되더라구요 ( 제 능력으론 ㅠ.ㅠ )
문제는 아래와 같이 컨트롤을 만들때 폰트어썸을 넣고 쓰려는데
박스안 좌우 높이가 1픽셀 차이가 나요
작은화면으로 봐조 언뜻보면 잘 모르겠고 자세히 봐도 잘 모를수도 있겠지만
암튼 좌우 높이가 차이가 나요
제가 결벽증일수도 있겠지만 이제 색을 넣고 라인을 넣고 하다보면 차이가 눈에띄게 나와요...ㅠ
그래서 저는 무조건 저걸 수직 중앙정렬을 해야겠다라고 마음을 먹었는데....
항상 마음먹은대로는 저얼대로 안되죠 ㅠ.ㅠ
그러면 이제 제가 쓰는 코드를 보여드리면
<a class="left carousel-control" href="# " role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">이전</span>
</a>
<a class="right carousel-control" href="# " role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">다음</span>
</a>
폰트어썸은 fa-angle-left 와 angle-right를 쓰고 class는 css부분에서 정의해서 가져오고 있어요
그러면 제가 쓰는 이 css는
.main-banner.div-carousel.carousel .carousel-control {
display: block !important;
background-color: #fff;
background-image: none !important;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px !important;
font-size: 17px;
color: #999;
margin-top:0px !important;
filter: alpha(opacity=100);
opacity: 1;
text-shadow: none !important;
border:1px solid #999;
color:#000 !important;
}
.main-banner.div-carousel.carousel .left.carousel-control {
left: auto;
right: 40px;
top: 15px;
}
.main-banner.div-carousel.carousel .right.carousel-control {
right: 5px;
top: 15px;
}
문제가 뭔지잘 모르겠어요 ㅠ.ㅠ
우선 text-align: center; 자체가 안먹히고 있어요...
그게 왜 그런지 원인은 초보자인저로서는 아에 이해를 못합니다 ㅠ .ㅠ
각종검색을 해봐서
margin값을 조정한다던지 테이블셀을 주고 vertical-align를 미들로 한다던지
등등 나오는대로 다 해봤는데..제 검색능력이 부족하고 지식도 부족하다보니
아에 캐러셀이는 저를 비웃고 반응도 안합니다 ㅠ
많은 인자하신 고숩님들의 현명하신 조언좀 부탁드려요
답변 3
아래처럼 추가 선언만 한 상태로 확인해보세요
정렬이 틀어지거나 하는일은 우선 없네요
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
<style>
.main-banner.div-carousel\.carousel .carousel-control {
display: block !important;
background-color: #fff;
background-image: none !important;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px !important;
font-size: 17px;
color: #999;
margin-top:0px !important;
filter: alpha(opacity=100);
opacity: 1;
text-shadow: none !important;
border:1px solid #999;
color:#000 !important;
}
.main-banner.div-carousel\.carousel .left.carousel-control {
left: auto;
right: 40px;
top: 15px;
}
.main-banner.div-carousel\.carousel .right.carousel-control {
right: 5px;
top: 15px;
}
/* 추가 선언 */
.main-banner.div-carousel\.carousel .carousel-control {
display: flex !important;
align-items: center;
justify-content: center;
}
#ruller-1, #ruller-2 {
position: absolute;
width: 100%;
}
#ruller-1 { top: 4px; }
#ruller-2 { top: 16px; }
</style>
<div class="main-banner div-carousel.carousel">
<a class="left carousel-control" href="# " role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">이전</span>
</a>
<a class="right carousel-control" href="# " role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">다음</span>
</a>
</div>
<hr id="ruller-1" />
<hr id="ruller-2" />
왜 그런지 어떻게 하는지는 잘 몰라서요
야매로다가...폰트어썸부분에
<span style="position:relative; top:-1px;"><i class="fa fa-angle-left
스타일로 끌어올리긴 했어요~ 근데 애당초 왜 저렇게 나오는지 이해가 불가능하네요~
해당 페이지 URL을 올려 보세요.
본문 내용에 있는 css 말고도 관련 있는 부분이 더 있나 봅니다.
