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 show just one line of text in paragraph with width 100% which is part of the table cell?

    How to prevent text style defaults during CSS transition

    How to write a more specific css

    How to fix flexbox position:fixed navbar JS/CSS bug

    How can i position a background image to the top left and bottom right of a html element?

    How to center dropdown menu under parent tab?

    How to center this by using css?

    How can I reload css styles when change windows width?

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    how to make css dropdown menu a dropup menu

    How to create a fluidic list using css

    How do I get nested divs to be same height and expand to the largest of the heights?

    how to create a tirangle and square with ccs only?

    How to prevent right-to-left text appearence while using arabic language?

    CSS stylesheets at top or bottom? or How to solve blank page issue?

    How to move text up using CSS when nothing is working

    How to CSS pairs of DIV text left/right of center

    How do I select this Div with CSS

    How to dynamically insert css vendor prefixes using jquery

    css - how to stretch and auto-resize background image

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    How do I hide the parent of a nested list while keeping the nested list visible?

    CSS: How to force DIV to maintain aspect ratio the same way IMG does

    How to get css properties set explicitly via the style attribute? [closed]

    How to HTML/CSS Limit / Clip / Mask an object?

    How to get table-row css and border property work together?

    How can I make the text stop moving when one DIV opens?

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How to center my text vertically in a circular div with css

    How can I make all images of different height and width the same via CSS?