여러 개의 절대 div를 가운데로 맞 춥니 다

Question

여러 절대 div를 수평으로 가운데 맞추는 것에 대한 질문이 있습니다. 4 개의 자식 div를 포함하는 친척 인 부모 div가 있습니다. 나는 그들에게 균등하게 중심을두기를 원한다. 네 div를 가운데에 정렬 한 다음 한 번 추가하는 방법이 있습니까? 아니면 하나씩 배치해야합니까? 지금 내가 가진 것은 divs 절대 위치를 지정할 때입니다. 그들은 중심에있을 때 서로 겹쳐 쌓입니다.

감사합니다.

Answer 1

div에 대해 div을 정의하고 display: flex을 사용할 수 있습니다.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
boxes { 
 
    margin-top: 25px; 
 
    width: 100%; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.eq { 
 
    display: flex; 
 
} 
 
.box { 
 
    width: 300px; 
 
    max-height: 400px; 
 
    min-height: 233px; 
 
    padding: 15px; 
 
    border: 1px solid #e6e6e6; 
 
    overflow-wrap: break-word; 
 
    background-color: #fff; 
 
    margin-right: 20px; 
 
    ; 
 
}

<div class="boxes"> 
 
    <div class="box"> 
 
    <h3>MyBMW Login</h3> 
 
    <form class="" action="index.html" method="post"> 
 
     <input type="text" name="email" placeholder="Emailadres"> 
 
     <input type="password" name="password" placeholder="Wachtwoord"> 
 
    </form> 
 
    </div> 
 
    <div class="eq"> 
 
    <div class="box"> 
 
1 
 
    </div> 
 
    <div class="box"> 
 
2 
 
    </div> 
 
    <div class="box"> 
 
3 
 
    </div> 
 
    </div> 
 
</div>

그러나 나는 position: absolute을 삭제했다. 당신이 원하는 것이 아니라면, 우리에게 더 자세한 정보를주십시오.

Answer 2

이 당신의 CSS를 변경

, 날 위해 일했습니다. 내가이 절대하지 것이다

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

.boxes { 
    position: absolute; 
    background-color: #000; 
    display: flex; 
    margin-top: 25px; 
    width: 100%; 
    text-align: center; 
} 

.box { 
    position: relative; 
    width: 300px; 
    max-height: 400px; 
    min-height: 233px; 
    padding: 15px; 
    border: 1px solid #e6e6e6; 
    overflow-wrap: break-word; 
    background-color: #fff; 
    margin-right: 20px; 
} 

Answer 3

,이 .box div의 당신이 .boxes는 "위치가 절대"할 수있다, 상대 할 필요가있다.

https://jsfiddle.net/DamianToczek/3w50gj28/4/ 

. 상자를 절대적으로 만들면 ID .box는 절대 일 수 없습니다. 항상 절대적인 컨테이너를 만듭니다. 당신이 .box 절대 확인하려면, 당신은 그들에게 .box1의 .box2의 .box3 같은 다른 ID를 제공해야 가장 좋은 옵션은 "중심"항목을 보유하고 컨테이너는 항상, 컨테이너는 당신을 위해 .boxes입니다 :

.boxes { 
    width:100%; 
    position:absolute; 
}