가로 정렬할 때

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 07(Testimonial 탭 슬라이더)

작성

715

.items div{

width: 800px;

height: 400px;

float: left;

padding: 40px;

box-sizing: border-box;

}

float: left를 주지 말고 display: inline block을 줘도 되지 않나요?
너비값 주고 가로정렬 하는 역할이니까 써도 될 것 같은데

근데 써보니까 출력이 반쯤 잘려서 나오네요

HTML/CSS jquery

답변 2

코딩웍스(Coding Works)

지식공유자

float: left 대신에 display: inline-block으로 가로배치하셔도 됩니다.
단, 인라인블록의 경우 우측에 마진이 5~6픽셀 생기기 때문에 margin-right: -5px에서 -6px 이렇게 해줘야 합니다.
그래야 부모요소인 .items 안에 자식요소인 .items div 가 들어옵니다.

코드에는 문제가 없어 보이는데 .items div 겹치는 부분이 중앙에 있을까요?
.items의 부모요소의 코드가 보이지 않는데 그 부분을 보면 더 잘 알 것 같습니다.

신형화

 <div class="tab-inner">
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2">
        <input type="radio" name="tabmenu" id="tab3">
        <h1>Testimonials</h1>
        <div class="tabs">
            <div class="items">
                <div>Content1</div>
                <div>Content2</div>
                <div>Content3</div>
            </div>
        </div>
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
    </div>
 
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.tab-inner{
    height: 500px;
    border:1px solid green;
}

input[name=tabmenu]{
display: none;
}

.tabs{
border:1px solid red;
width: 3600px;
height: 400px;
position: relative;
}

.items{
    height: 400px;
    position: absolute;
    top:0;
    left: 0;
    transition: 0.5s;
}

.items div{
    float: left;
    border:1px solid blue;
    width: 1200px;
    height: 400px;
    box-sizing: border-box;
}

.btn{
    text-align: center;
}

.btn label{
    width: 10px;
    height: 10px;
    background-color: lightgray;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

이렇게하면,, 버튼이 content1내에서 가운데정렬이아니라
전체 3박스에서 가운데정렬이되는데 왜그런것일까요?.

인프런 커뮤니티 질문&답변

가로 정렬할 때