divの左右の中央に2つのボタンを配置するには

Question

画像を含むフレームがあります。左右のボタンを2つ追加して、別の写真を表示する。私はJavaScriptを処理することができますが、私はこれらの2つのボタンを適切な位置に揃える方法を見つけることはできません。ありがとうございました。

.frame { 
 
    background: #e0e0e0; 
 
    width: 300px; 
 
    height: 350px; 
 
    border: 1px solid #b9b9b9; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.content { 
 
    background: #FFF; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.btn { 
 
    width: 15px; 
 
    height: 20px; 
 
} 
 

 
.btnLeft { 
 
    float: left; 
 
    background: red; 
 
} 
 

 
.btnRight { 
 
    float: right; 
 
    background: blue; 
 
}

<div class="frame"> 
 
    <div class="content"></div> 
 
</div> 
 
<div class="btn btnLeft"></div> 
 
<div class="btn btnRight"></div>

​​

Answer 1

あなたは正しい軌道に乗っていたが、justify-content: space-between;ないjustify-content: center;を必要とし、必要に応じてその後position:absoluteは、各ボタンの

コードをleftとright位置を設定し、これらのボタンを作ります.btnLeftと.btnRightを.frameの中に挿入します。

_画像

.frame { 
 
    background: #e0e0e0; 
 
    width: 300px; 
 
    height: 350px; 
 
    border: 1px solid #b9b9b9; 
 
    display: flex; 
 
    justify-content: space-between; /* not center */ 
 
    align-items: center; 
 
} 
 

 
.content { 
 
    background: #FFF; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.btn { 
 
    width: 15px; 
 
    height: 20px; 
 
} 
 

 
.btnLeft{ 
 
    background: red; 
 
} 
 

 
.btnRight { 
 
    background: blue; 
 
}

<div class="frame"> 
 
    <div class="btn btnLeft"></div> 
 
    <div class="content"></div> 
 
    <div class="btn btnRight"></div> 
 
</div>

Answer 2

あなたがleftとright位置を参照することができるように、フレームの内側にボタンを配置することがあります。

.frame { 
    background: #e0e0e0; 
    width: 300px; 
    height: 350px; 
    border: 1px solid #b9b9b9; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
} 
.btn{ 
    position: absolute; 
    top: 50%; 
    transform:translateY(-50%); 
} 
.btnLeft{ 
    left: 0; 
} 
.btnRight{ 
    right: 0; 
} 

更新フィドル： https://jsfiddle.net/y0ty7t80/3/

Answer 3

まずCSS-Tricksからあなたはrにフレームの位置を設定できます。ここでは

は justify-contentの異なる値が仕事ですエラスティックであるため、フォローイングのルートとして設定されます。次に、2つのボタンの位置を「絶対」に設定し、フレームの内側に配置してテキストフローから取り除くことができます。 left/rightプロパティを0、topプロパティを50％に設定すると、フレームの中央に正確に配置されます。私が言いたいの相続人例：

.frame { 
 
    position:relative; 
 
    background: #e0e0e0; 
 
    width: 300px; 
 
    height: 350px; 
 
    border: 1px solid #b9b9b9; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.content { 
 
    background: #FFF; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.btn { 
 
    width: 15px; 
 
    height: 20px; 
 
} 
 

 
.btnLeft{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:0; 
 
    background: red; 
 
} 
 

 
.btnRight { 
 
    position:absolute; 
 
    top:50%; 
 
    right:0; 
 
    background: blue; 
 
}

<div class="frame"> 
 
    <div class="btn btnLeft"></div> 
 
    <div class="btn btnRight"></div> 
 
    <div class="content"></div> 
 
</div>