How to vertically center an HR element


Tags: css,table,html,vertical-alignment,css-tables

Problem :

How do I vertically center an hr element?

I've tried to place the element in some div elements...

<div class="table">
    <div class="table-cell"><hr /></div>
</div>
<div class="table">
    <div class="table-cell">Some text Here!</div>
</div>
<div class="table">
    <div class="table-cell"><hr /></div>
</div>

I've left out that I am using bootstrap and have these three div elements with the class of table in the same row using the col-size-number format.


So I'm looking for inline HR element Some Text inline HR element

--------------SOME TEXT--------------

Thank you again css guru masters!



Solution :

<hr /> tags should vertically align just like any other element that is used appropriately in the <div> using

display:table-cell;vertical-align:middle;

in your CSS.

.table {
   display:table;
   width:100%; height:100%;
   position:absolute;
}

.table-cell {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   width:auto;
   height:auto;
}

DEMO


    CSS Howto..

    How to load a small css background image before lots of other images (html element in .css file)?

    How to figure out what is going on with this nice CSS horizontal menu? [closed]

    How to make a responsive mosaic css fullscreen width

    HTML/CSS How to format Text and have an Image floating next to it

    How to make styling and functioning of form elements get not to break in all browsers?

    How to put a table inside an inline-block element where cells have a percentage width

    How is it that CSS borders create a triangle?

    how to create an anchor point

    Selenium IDE - How to check that an element is (CSS) visible?

    How to automatically resize the wrapper div using CSS

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    How to make the margins and border in a mobile website invisible html/css

    How can I set a height of document [duplicate]

    How to determine why floated elements are affecting the heights of non-floated elements (D7 views blocks with zen theme)?

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to add border to galleria big image?

    How do CSS grid systems save time when implementing designs that aren’t grid-based?

    How to change the scrolling text in CSS or JQuery

    Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

    Shows a dropdown element with jQuery

    How can align these elements?CSS

    Text Underline Showing Underline

    How to CSS a two column list of items?

    How to implement Read more / Read less in pure CSS

    How to make text appear when input box is active

    How to add arrow beside some links in CSS?

    How to use JavaScript to Alter CSS for Multiple Elements

    How to align vertical text horizontally center?

    How to use active and before with CSS?

    How to adjust the opacity of CSS background image instead of radio button with an icon overlay