html - 線の中心ボタンで線を引く方法

Question

<hr>CSSで線を描きたい。そして、その線を途中で切るボタンが線の中央にあります。では、css でこの効果を得るにはどうすればよいでしょうか。

Answer 1

margin-bottomあなたのにマイナスを与えますbutton。次のように書きます。

button{
 margin-bottom:-20px;
 position:relative;
} 

Answer 2

CSS

.button-holder{display:block; height:30px; border-bottom:1px solid #ff0000; position:relative; text-align:center;}
input{position:absolute; bottom:-13px;}

HTML

<div class="button-holder">
    <input type="button" value="button in the middle of HR" />
</div>