I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:
Section one ----------------------- Next section ----------------------- Section two
I've thought of doing some fancy things like this:
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
Or alternatively, because the above has problems with alignment (both vertical and horizontal):
<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>
This also has alignment problems, which I solve with this mess:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.
How about:
<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
<span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
Section Title <!--Padding is optional-->
</span>
</div>Check out this JSFiddle.
You can use vw or % to make it responsive.
The way to solve this without knowing the width and the background color is the following:
Structure
<div class="strike">
<span>Kringle</span>
</div>
CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
Example: http://jsfiddle.net/z8Hnz/
Double line
To create a double line, use one of the following options:
1) Fixed space between lines
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 4px double red;
Example: http://jsfiddle.net/z8Hnz/103/
2) Custom space between lines
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 5px; /* space between lines */
margin-top: -2px; /* adjust vertical align */
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Example: http://jsfiddle.net/z8Hnz/105/
SASS (SCSS) version
Based on this solution, I added SCSS "with color property" if it could help someone...
//mixins.scss
@mixin bg-strike($color) {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
> span {
position: relative;
display: inline-block;
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: $color;
}
&:before {
right: 100%;
margin-right: 15px;
}
&:after {
left: 100%;
margin-left: 15px;
}
}
}
example of use :
//content.scss
h2 {
@include bg-strike($col1);
color: $col1;
}
You can accomplish this with ::before and ::after without knowing the width of container or background color, and to achieve greater styling of the line breaks. For example, this can be modified to make double-lines, dotted lines, etc.
CSS, and HTML usage:
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.35);
margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}<div class="hr-sect">CATEGORY</div>Try this:
.divider {
width:500px;
text-align:center;
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}<div class="divider">
<hr class="left"/>TEXT<hr class="right" />
</div>Live preview on jsFiddle.
I just came across the same problem, here is one way to solve it:
<table width="100%">
<tr>
<td><hr /></td>
<td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
<td><hr /></td>
</tr>
</table>
It works without setting a background on the text element, i.e. it will look good regardless what background is behind it.
You can try it out here: http://jsfiddle.net/88vgS/
I don't know if this has been figured out but flexbox offers quite a solution:
<div class="separator">Next section</div>
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before, .separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.separator::before {
margin-right: .25em;
}
.separator::after {
margin-left: .25em;
}
See http://jsfiddle.net/MatTheCat/Laut6zyc/ for demo.
Today the compatibility is not that bad (you can add all of old flexbox syntaxes) and it degrades gracefully.
UPDATE: This will not work using HTML5
Instead, check out this question for more techniques: CSS challenge, can I do this without introducing more HTML?
I used line-height:0 to create the effect in the header of my site guerilla-alumnus.com
<div class="description">
<span>Text</span>
</div>
.description {
border-top:1px dotted #AAAAAA;
}
.description span {
background:white none repeat scroll 0 0;
line-height:0;
padding:0.1em 1.5em;
position:relative;
}
Another good method is on http://robots.thoughtbot.com/
He uses a background image and floats to achieve a cool effect
If you can use CSS and are willing to use the deprecated align attribute, a styled fieldset/legend will work:
<style type="text/css">
fieldset {
border-width: 1px 0 0 0;
}
</style>
<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>
<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>
The intended purpose of a fieldset is to logically group form fields. As willoler pointed out, a text-align: center style for will not work for legend elements. align="center" is deprecated HTML but it should center the text properly in all browsers.
<div style="text-align: center; border-top: 1px solid black">
<div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>
You could just use position relative and set a height on the parent
.fake-legend {
height: 15px;
width:100%;
border-bottom: solid 2px #000;
text-align: center;
margin: 2em 0;
}
.fake-legend span {
background: #fff;
position: relative;
top: 0;
padding: 0 20px;
line-height:30px;
}<p class="fake-legend"><span>Or</span>
</p>Bootstrap grid:
HTML:
<div class="row vertical-center">
<div class="col-xs-5"><hr></div>
<div class="col-xs-2" style="color: white"> Text</div>
<div class="col-xs-5"><hr></div>
</div>
CSS:
.vertical-center{
display: flex;
align-items: center;
}
<fieldset style="border:0px; border-top:1px solid black">
<legend>Test</legend>
</fieldset>
Evil hack ...
Bumping up a 2 year old post, but here is how I approach these situations using only one element and CSS.
h1 {
text-align: center;
}
h1:before,
h1:after {
content: "";
background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
width: 15%;
height: 30px;
display: inline-block;
margin: 0 15px 0 0;
}
h1:after{
background-position: right center;
margin: 0 0 0 15px;
}
And here is a fiddle to check it out: http://jsfiddle.net/sRhBc/ (random image from Google taken for the border).
The only drawback of this approach is that it doesn't support IE7.
Woohoo my first post even though this is a year old. To avoid the background-coloring issues with wrappers, you could use inline-block with hr (nobody said that explicitly). Text-align should center correctly since they are inline elements.
<div style="text-align:center">
<hr style="display:inline-block; position:relative; top:4px; width:45%" />
New Section
<hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>
I use a h1 with a span in the middle.
HTML Example:
<h1><span>Test archief</span></h1>
CSS Example:
.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }
Simple as that.
Looking at above, I modified to:
CSS
.divider {
font: 33px sans-serif;
margin-top: 30px;
text-align:center;
text-transform: uppercase;
}
.divider span {
position:relative;
}
.divider span:before, .divider span:after {
border-top: 2px solid #000;
content:"";
position: absolute;
top: 15px;
right: 10em;
bottom: 0;
width: 80%;
}
.divider span:after {
position: absolute;
top: 15px;
left:10em;
right:0;
bottom: 0;
}
HTML
<div class="divider">
<span>This is your title</span></div>
Seems to work fine.
Taking @kajic's solution and putting the styling in CSS:
<table class="tablehr">
<td><hr /></td>
<td>Text!</td>
<td><hr /></td>
</table>
Then CSS (but it depends on CSS3 in using nth selector):
.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }
Cheers.
(P.S. On tbody and tr, Chrome, IE and Firefox at least automatically inserts a tbody and tr, which is why my sample, like @kajic's, didn't include these so as to keep things shorter in the needed html markup. This solution was tested with newest versions of IE, Chrome, and Firefox, as of 2013).
HTML
<header>
<h1 contenteditable>Write something</h1>
</header>
CSS
header{
display:table;
text-align:center;
}
header:before, header:after{
content:'';
display:table-cell;
background:#000;
width:50%;
-webkit-transform:scaleY(0.3);
transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }
This worked for me and does not require background color behind the text to hide a border line, instead uses actual hr tag. You can play around with the widths to get different sizes of hr lines.
<div>
<div style="display:inline-block;width:45%"><hr width='80%' /></div>
<div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
<div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>
Just Use
hr
{
padding: 0;
border: none;
border-top: 1px solid #CCC;
color: #333;
text-align: center;
font-size: 12px;
vertical-align:middle;
}
hr:after
{
content: "Or";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.2em;
padding: 0 0.25em;
background: white;
}
I made a fiddle that uses FlexBox and will also give you different styles of HR (double line, symbols in the center of the line, drop shadow, inset, dashed, etc).
CSS
button {
padding: 8px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #ccc;
margin: 2px;
}
button:hover {
cursor: pointer;
}
button.active {
background-color: rgb(34, 179, 247);
color: #fff;
}
.codeBlock {
display: none;
}
.htmlCode, .cssCode {
background-color: rgba(34, 179, 247, 0.5);
width: 100%;
padding: 10px;
}
.divider {
display: flex;
flex-direction: row;
flex-flow: row;
width: 100%;
}
.divider.fixed {
width: 400px;
}
.divider > label {
align-self: baseline;
flex-grow: 2;
white-space: nowrap;
}
.divider > hr {
margin-top: 10px;
width: 100%;
border: 0;
height: 1px;
background: #666;
}
.divider.left > label {
order: 1;
padding-right: 5px;
}
.divider.left > hr {
order: 2
}
.divider.right > label {
padding-left: 5px;
}
/* hr bars with centered text */
/* first HR in a centered version */
.divider.center >:first-child {
margin-right: 5px;
}
/* second HR in a centered version */
.divider.center >:last-child {
margin-left: 5px;
}
/** HR style variations **/
hr.gradient {
background: transparent;
background-image: linear-gradient(to right, #f00, #333, #f00);
}
hr.gradient2 {
background: transparent;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
hr.dashed {
background: transparent;
border: 0;
border-top: 1px dashed #666;
}
hr.dropshadow {
background: transparent;
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
hr.blur {
background: transparent;
border: 0;
height: 0;
/* Firefox... */
box-shadow: 0 0 10px 1px black;
}
hr.blur:after {
background: transparent;
/* Not really supposed to work, but does */
content: "\00a0";
/* Prevent margin collapse */
}
hr.inset {
background: transparent;
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
hr.flared {
background: transparent;
overflow: visible;
/* For IE */
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.flared:before {
background: transparent;
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
hr.double {
background: transparent;
overflow: visible;
/* For IE */
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.double:after {
background: transparent;
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
}
HTML
<div class="divider left">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider right">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider center">
<hr />
<label>Welcome!</label>
<hr />
</div>
<p> </p>
<div class="divider left fixed">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider right fixed">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider center fixed">
<hr />
<label>Welcome!</label>
<hr />
</div>
Or here's an interactive Fiddle: http://jsfiddle.net/mpyszenj/439/
You could try doing a fieldset, and aligning the "legend" element (your "next section" text) to the middle of the field with only border-top set. I'm not sure about how a legend is positioned in accordance with the fieldset element. I imagine it might just be a simple margin: 0px auto to do the trick, though.
example :
<fieldset>
<legend>Title</legend>
</fieldset>
Heres a simple solution with css only, no background tricks...
.center-separator {
display: flex;
line-height: 1em;
color: gray;
}
.center-separator::before, .center-separator::after {
content: '';
display: inline-block;
flex-grow: 1;
margin-top: 0.5em;
background: gray;
height: 1px;
margin-right: 10px;
margin-left: 10px;
}
HTML:
<div class="center-separator">
centered text
</div>
example fiddle: https://jsfiddle.net/0Lkj6wd3/
You can accomplish this without <hr />. Semantically, design should be done with the means of CSS, in this case it is quite possible.
div.header
{
position: relative;
text-align: center;
padding: 0 10px;
background: #ffffff;
}
div.line
{
position: absolute;
top: 50%;
border-top: 1px dashed;
z-index: -1;
}
<div class="header">
Next section
<div class="line"> </div>
</div>
There's always the good old FIELDSET
fieldset
{
border-left: none;
border-right: none;
border-bottom: none;
}
fieldset legend
{
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
You can create a wrapper block with some appropriate background image (and also set some background color for your centered text block).
CSS
.Divider {
width: 100%; height: 30px; text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}
HTML
<div class="Divider">
<div class="Side"><hr></div>
<div class="Middle"><span>OR</span></div>
<div class="Side"><hr></div>
</div>
You may modify the width in class "side" and "middle" based on the length of your text in the tag "span". Be sure the width of the "middle" plus 2 times of the width of "side" equal to 100%.
Responsive, transparent background, variable height and style of divider, variable position of text, adjustable distance between divider and text. Can also be applied multiple times with different selectors for multiple divider styles in same project.
SCSS below.
Markup (HTML):
<div class="divider" text-position="right">Divider</div>
CSS:
.divider {
display: flex;
align-items: center;
padding: 0 1rem;
}
.divider:before,
.divider:after {
content: '';
flex: 0 1 100%;
border-bottom: 5px dotted #ccc;
margin: 0 1rem;
}
.divider:before {
margin-left: 0;
}
.divider:after {
margin-right: 0;
}
.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
content: none;
}
Without text-position it defaults to center.
Demo:
.divider {
display: flex;
align-items: center;
padding: 0 1rem;
}
.divider:before,
.divider:after {
content: '';
flex: 0 1 100%;
border-bottom: 5px dotted #ccc;
margin: 0 1rem;
}
.divider:before {
margin-left: 0;
}
.divider:after {
margin-right: 0;
}
.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
content: none;
}<span class="divider" text-position="left">Divider</span>
<h2 class="divider">Divider</h2>
<div class="divider" text-position="right">Divider</div>And SCSS, to modify it quickly:
$divider-selector : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width : 100%;
#{$divider-selector} {
display: flex;
align-items: center;
padding: 0 $divider-padding;
max-width: $divider-max-width;
margin-left: auto;
margin-right: auto;
&:before,
&:after {
content: '';
flex: 0 1 100%;
border-bottom: $divider-border-width $divider-border-style $divider-border-color;
margin: 0 $divider-padding;
transform: translateY(#{$divider-border-width} / 2)
}
&:before {
margin-left: 0;
}
&:after {
margin-right: 0;
}
&[text-position="right"]:after,
&[text-position="left"]:before {
content: none;
}
}
来源：https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line