How to draw a line with button the center of the line


Tags: html,css

Problem :

I want to draw a <hr> line in CSS. And there is a button at the center of the line which cuts that line in the middle. So how can I achieve this effect in css?



Solution :

Give margin-bottom in minus to your button. Write like this:

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

    CSS Howto..

    How to inserted HTML tag from pseudo-element content: [duplicate]

    Can't figure out how to code my css

    How do I know which CSS is overriding my background image?

    how to get background image present in other folder with css?

    How to change/remove CSS classes definitions at runtime?

    How to center video source in circle shape using css, html

    (html/css) How do I remove the margin appearing from my header, and have it only apply to my Logo?

    Bootstrap, css How to change background

    How to animate the filling of a html element

    IcoMoon App icon fonts are shown as 

    How do I set my ul's margin after setting every padding and margin to zero in CSS? [closed]

    How to do proper and responsive Image Grid view with display:flex [duplicate]

    how to make a css “if opera,not…”

    CSS: how to style on character height versus line height

    How to place a div below another div?

    How to add text to a CSS Sprite

    How do I put a clear button inside my HTML text input box like the iPhone does?

    How can I do the following thing without inline styling?

    How do I display the first image from each div with .className?

    How to override Inline Style CSS?

    How do I grey out the default text of a text box?

    Need to show submenu to the right of it's parent item

    Javascript/Jquery How to catch the use of a CSS class

    How to prevent crawlers depending on XPath from getting pages contents [duplicate]

    How to have a background image wider than the content area of a website (without scrollbars)

    How to disable auto genrated css in media folder at runtime Magento?

    How Do I Set the condition for a user to have to fill in a Textfield

    How to apply css transformations on HTML elements using jQuery?

    How to avoid Zalgo text bleeding all over place without totally removing it?

    How to achieve this gradient using valid HTML & CSS only