コンテナの子の全幅を取る方法

Question

私は親divの子である2つのdivを持ち、それぞれの幅はパーセンテージで表示されます（重要：幅がパーセンテージである必要があります）。しかし、トリックはここにあります、私はマージンオートトリックを使用して不可能と思われるページの中央にこの全体を位置合わせする必要があります。助けてください！ここで

は、これまでのコードです：

<div class="container" style="display: inline-block; width: 100%;"> 
    <div style="margin: 0px auto;"> 
     <div class="child1" style="width: 40%; float: left; background: lightblue;">Testing Child 1</div> 
     <div class="child2" style="width: 30%; float: left; background: lightgreen">Testing Child 2</div> 
    </div> 
</div> 

Answer 1

あなたは、通常のドキュメントフローのうちの要素を取るフロートを使用しています。私はあなたの.containerをフレックスボックスとして定義し、CSS経由で子供の中心に置いた。

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.child1 { 
 
    width: 40%; 
 
    background-color: lightblue; 
 
} 
 

 
.child2 { 
 
    width: 30%; 
 
    background-color: lightgreen; 
 
}

<div class="container"> 
 
    <div class="child1">Testing Child 1</div> 
 
    <div class="child2">Testing Child 2</div> 
 
</div>

Answer 2

あなたはこのように使用することができます -

<div class="container" style="display: inline-block; width: 100%;text-align: center"> 
    <div style="margin: 0px auto;"> 
     <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!-- 
     --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div> 
    </div> 
</div> 

それはあなたのために働く可能性があり:)

Answer 3

あなたは右の15％のパディングを追加して、あなたの左側ができコンテナは次のようになります。

.container { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding: 0 15%; 
 
    background: red; 
 
} 
 
.child1 { 
 
    float: left; 
 
    width: 40%; 
 
    background: lightblue; 
 
} 
 

 
.child2 { 
 
    float: left; 
 
    width: 30%; 
 
    background: lightblue; 
 
}

<div class="container"> 
 
    <div class="child1">Testing Child 1</div> 
 
    <div class="child2">Testing Child 2</div> 
 
</div>

は、この情報がお役に立てば幸いです。

Answer 4

おそらく、この方法を試してみてください。

#box { 
 
position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    }

<div class="container" style="display: inline-block; width: 100%;text-align: center"> 
 
    <div id="box" style="margin: 0px auto; width: 100%;"> 
 
     <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!-- 
 
     --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div> 
 
    </div> 
 
</div>

Answer 5

あなたはフレキシボックスでそれを行うことができます。

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="child1" style="width: 40%; background: lightblue">Testing Child 1</div> 
 
    <div class="child2" style="width: 30%; background: lightgreen">Testing Child 2</div> 
 
</div>