divの真ん中の水平線

Question

divの中央に線を作りたいと思います。次の画像では、線は赤いボックスの中央にあるはずです。私は、行の高さを利用して、それにできないことをやろうとしている

。

ここでは、コードです：

HTML/CSS：

.wrap { 
 
    text-align: center; 
 
    margin: 20px; 
 
} 
 
.links { 
 
    padding: 0 10px; 
 
    border-top: 1px solid #000; 
 
    height: 1px; 
 
    line-height: 0.1em; 
 
} 
 
.dot { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 150px; 
 
    position: relative; 
 
    top: -10px; 
 
}

<div class="wrap"> 
 
    <div class="links"> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    </div> 
 
</div>

デモ： https://jsfiddle.net/nkq468xg/

Answer 1

あなたはを使用することができますが、はlinks、行は:beforeラップ要素の疑似要素を使用できます。

.wrap { 
 
    text-align: center; 
 
    margin: 20px; 
 
    position: relative; 
 
} 
 
.links { 
 
    padding: 0 10px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: relative; 
 
} 
 
.wrap:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    border-top: 1px solid black; 
 
    background: black; 
 
    width: 100%; 
 
    transform: translateY(-50%); 
 
} 
 
.dot { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
}

<div class="wrap"> 
 
    <div class="links"> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    </div> 
 
</div>

Answer 2

はここでラインが上に実際にあるものだが、それはHTMLに別の要素を追加します：

https://jsfiddle.net/nkq468xg/2/

.wrap { 
 
    text-align: center; 
 
    margin: 20px; 
 
} 
 

 
.links { 
 
    height: 20px; 
 
    position: relative; 
 
} 
 
hr { border: 0; 
 
height: 1px; 
 
background: black; 
 
position: absolute; 
 
top: 1px; 
 
width: 100%; 
 
} 
 
.dot { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 150px; 
 
}

<div class="wrap"> 
 
    <div class="links"> 
 
    <hr> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    </div> 
 
    </div>

Answer 3

あなたがSOにここにあなたの質問にあなたのコードスニペットを確認:after

.links { 
    padding: 0 10px; 
    overflow: auto; // Your div will have the height of the overflowing elements 
} 

.links::after { 
    content: ''; 
    width: 100%; 
    height: 1px; 
    background: black; 
    display: block; 
    position: relative; 
    top: 10px; 
} 

Answer 4

のように、擬似要素を使用することができます（「ファイル名を指定して実行コードスニペット」青いボタン）は、あなたが何を必要とするということですか？ .dotのコードにposition: relative; top: -10px;を追加しました。

.dot { 
    position: relative; 
    top: -10px; 
} 

フィドル：https://jsfiddle.net/nkq468xg/3/