が<hr>

Question

の真ん中のボタンを挿入するためにどのように私は基本的に

div { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: no-wrap; 
 
}

<div> 
 
    <hr> 
 
    <button> 
 
    <hr> 
 
</div>

のようなものを持っている。しかし、それは動作しません、と私はあまりにも時間のスタイルを試してみました、ドン」いずれかの仕事。 基本的には、同じ行（行）のhr + aボタン+時間（hrは約半分のサイズ）を含む1行がすべて中央に配置されるようにします。

すべてのヒント？

は

Answer 1

あなたはhrの

div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
hr { 
 
    flex: 1; 
 
    border: none; 
 
    height: 2px; 
 
    background: black; 
 
}

<div> 
 
    <hr> 
 
    <button>Button</button> 
 
    <hr> 
 
</div>

Updateでflex: 1を使用することができますありがとう：あなたは時間に幅を変更したい場合は、このFiddleようにそれを中央にすることができます代わりに疑似要素を使用することもできますFiddle