Add centered text to the middle of a horizontal rule [duplicate]
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 开发者_如何学JAVAalignment 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;
}
Flexbox is the solution:
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.separator:not(:empty)::before {
margin-right: .25em;
}
.separator:not(:empty)::after {
margin-left: .25em;
}<div class="separator">Next section</div>Nowadays every browser supports it, and you can ensure compatibility with decade-old browsers by adding respective vendor prefixes if needed. It would degrade gracefully anyways.
You can accomplish this with :before and :after without knowing the width of container or background color, and using them allows for greater styling of the line breaks. For example, this can be modified to make double-lines, dotted lines, etc.
JSFiddle
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>SCSS Version:
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.35);
margin: 8px 0;
&:before, &:after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0;
line-height: 0;
margin: 0 8px;
}
}
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/
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
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;
}
<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>
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.
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>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/
With Bootstrap 4 this seems to be working for me:
<div class="row">
<div class="col"><hr/></div>
<div class="col-auto">Or</div>
<div class="col"><hr/></div>
</div><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).
DEMO PAGE
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/
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 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>
.orSpan{
position: absolute;
margin-top: -1.3rem;
margin-left:50%;
padding:0 5px;
background-color: white;
}<div>
<hr> <span class="orSpan">OR</span>
</div>You may required to adjust the margin property
html
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
<hr class="add-hr">
<h2>Add Employer</h2>
<hr class="add-hr">
</div>
css
.add-hr {
display: block; height: 1px;
border: 0; border-top: 4px solid #000;
margin: 1em 0; padding: 0;
}
.add-heading h2{
text-align: center;
}
please try this with bootstrap:
<div class="text-center d-flex">
<hr className="flex-grow-1" />
<span className="px-2 font-weight-lighter small align-self-center">
Hello
</span>
<hr className="flex-grow-1" />
</div>
here is result
Flexbox and SCSS
HTML
<div class="divider">divider</div>
SCSS
.divider {
display: flex;
align-items: center;
text-align: center;
color: #c2c2c2;
&::before,
&::after {
content: "";
flex: 1;
border-bottom: 1px solid #c2c2c2;
}
&::before {
margin-right: 0.25em;
}
&::after {
margin-left: 0.25em;
}
}
You can use the CSS flex property
HTML
<div class="hrtext">
<div class="hrbefore">
<hr>
</div>
<div class="hrcontent">
<h2>TABLE OF CONTENT</h2>
</div>
<div class="hrafter">
<hr>
</div>
</div>
CSS
.hrtext{
display:flex;
align-items:center;
}
.hrbefore,.hrafter{
flex:auto;
}
.hrcontent{
text-align:center;
}
加载中,请稍侯......
精彩评论