그누보드 QA - css에서 display: block안에 내용을 중앙정렬을 좀 하고싶어요..

css에서 display: block안에 내용을 중앙정렬을 좀 하고싶어요..

헛둘헛둘 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.11.13 05:09:46 781 (58.♡.♡.39)

답변 3

본문

구현하고 싶은것은

아래와 같은 기능이구요

988376615_1668282635.356.png

캐러셀로 하는데요

기능적으론 문제없이 잘 돌아갑니다!!

문제는 지금 모양을 넣고 있는데 컨트롤쪽을 아무리 해도 잘 안되더라구요 ( 제 능력으론 ㅠ.ㅠ )

문제는 아래와 같이 컨트롤을 만들때 폰트어썸을 넣고 쓰려는데

박스안 좌우 높이가 1픽셀 차이가 나요

988376615_1668282777.9705.png

988376615_1668283028.3288.png

작은화면으로 봐조 언뜻보면 잘 모르겠고 자세히 봐도 잘 모를수도 있겠지만 988376615_1668282872.3132.png

암튼 좌우 높이가 차이가 나요

제가 결벽증일수도 있겠지만 이제 색을 넣고 라인을 넣고 하다보면 차이가 눈에띄게 나와요...ㅠ

그래서 저는 무조건 저걸 수직 중앙정렬을 해야겠다라고 마음을 먹었는데....

항상 마음먹은대로는 저얼대로 안되죠 ㅠ.ㅠ

그러면 이제 제가 쓰는 코드를 보여드리면


    <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를 미들로 한다던지

등등 나오는대로 다 해봤는데..제 검색능력이 부족하고 지식도 부족하다보니

아에 캐러셀이는 저를 비웃고 반응도 안합니다 ㅠ

988376615_1668283625.755.jpg

많은 인자하신 고숩님들의 현명하신 조언좀 부탁드려요

#그누보드5

답변 3

배르만 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2022-11-13 23:35:04 119.♡.♡.81

아래처럼 추가 선언만 한 상태로 확인해보세요

정렬이 틀어지거나 하는일은 우선 없네요

2009389905_1668350087.9256.png

2009389905_1668350388.264.png


<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" />