子divは親divの中心をオーバーフローで整列しますか？

Question

こんにちは、Stackoverflowチーム

どのようにオーバーフローの親div内の子divは、右と左の余白がありますか？私はこの問題を解決しようとしていますが、それはクリーンな解決策ではありません。

試み：

マージン右文句を言わない仕事

div { 
 
    border: 1px solid black; 
 
} 
 

 
.parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    width: 350px; 
 
    height: 150px; 
 
    top: 50px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    position: absolute; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

私の汚れたソリューション：

div { 
 
    border: 1px solid black; 
 
} 
 

 
.parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    width: 350px; 
 
    height: 150px; 
 
    top: 50px; 
 
    margin-left: 20px; 
 
    border-right: 20px solid red; 
 
    position: absolute; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

問題を解決する方法はありますか？

Answer 1

子供のためにposition: absoluteを使用しているので、あなたが望むものを達成する最良の方法は、position: absoluteを削除してから、必要な余白を追加します。

div{ 
 
    border: 1px solid black; 
 
} 
 
.parent { 
 
    width:300px; 
 
    height:300px; 
 
    margin:auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    width:350px; 
 
    height:150px; 
 
    top: 50px; 
 
    margin: 50px 20px 0; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

更新

あなたは次のように別のdivでラップする必要がありますposition: absoluteする子のdivが必要な場合：

div{ 
 
    border: 1px solid black; 
 
} 
 
.parent { 
 
    width:300px; 
 
    height:300px; 
 
    margin:auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 
.child { 
 
    border-color: red; 
 
    position: absolute; 
 
    top: 20px; 
 
    height: 150px; 
 
} 
 
.sub-child { 
 
    width:350px; 
 
    height:150px; 
 
    margin: 0 20px; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="sub-child"></div> 
 
    </div> 
 
</div>