xhtml 1.0의 어떤 옵션이 텍스트의 양면에 선을 만들기 위해 엄격한 지 궁금합니다.

섹션 1
----------------------- 다음 섹션 -----------------------
섹션 2

나는 다음과 같은 멋진 일을 생각했습니다.

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

또는 위의 정렬에 문제가 있기 때문에 (수직 및 수평 모두) :

<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>

이것은 또한 정렬 문제가 있으며,이 엉망으로 해결합니다.

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

정렬 문제 외에도 두 옵션 모두 '흐리다'고 느끼며 이전에 이것을 보았고 우아한 해결책을 알고 있다면 많은 의무가 있습니다.

이것이 알아 냈는지 모르겠지만 flexbox는 상당히 해결책을 제공합니다.

<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;
}

데모는 http://jsfiddle.net/MatTheCat/Laut6zyc/ 를 참조하십시오 .

오늘날 호환성은 그리 나쁘지 않으며 (이전 flexbox 구문을 모두 추가 할 수 있음) 정상적으로 저하됩니다.

어때요?

<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>

이 JSFiddle을 확인하십시오 .

당신은 사용할 수 있습니다 vw또는 %이 반응하도록 .

너비와 배경색을 몰라도이를 해결하는 방법은 다음과 같습니다.

구조

<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;
}

예 : http://jsfiddle.net/z8Hnz/

이중선

이중선을 만들려면 다음 옵션 중 하나를 사용하십시오.

1) 라인 사이의 고정 공간

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

예 : http://jsfiddle.net/z8Hnz/103/

2) 선 사이의 사용자 정의 공간

.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;
}

예 : http://jsfiddle.net/z8Hnz/105/

SASS (SCSS) 버전

이 솔루션을 기반으로 누군가에게 도움이 될 수 있다면 "색상 특성이있는"SCSS를 추가했습니다.

//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;
        }
    }
}

사용 예 :

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

컨테이너 또는 배경색의 너비를 모르고 :: before 및 :: after로이를 수행하고 줄 바꿈의 스타일을 더 높일 수 있습니다. 예를 들어, 이중선, 점선 등을 만들도록 수정할 수 있습니다.

JSFiddle

CSS 및 HTML 사용법 :

.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 버전 :

.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;
    }
}

이 시도:

.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>

jsFiddle의 실시간 미리보기 .

방금 같은 문제를 겪었습니다.이를 해결하는 한 가지 방법이 있습니다.

<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>​

텍스트 요소에 배경을 설정하지 않고 작동합니다. 즉 배경 뒤에 어떤 배경이 있더라도 좋아 보입니다.

여기에서 시도해 볼 수 있습니다 : http://jsfiddle.net/88vgS/

업데이트 : 이것은 HTML5를 사용하여 작동하지 않습니다

대신이 질문에 더 많은 기술이 있는지 확인하십시오. CSS 챌린지, 더 많은 HTML을 도입하지 않고도이 작업을 수행 할 수 있습니까?

line-height:0내 사이트 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;
}

또 다른 좋은 방법은 http://robots.thoughtbot.com/ 에 있습니다.

그는 배경 이미지를 사용하고 멋진 효과를 얻기 위해 수레

<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>

CSS를 사용할 수 있고 더 이상 사용되지 않는 align속성 을 사용하려는 경우 스타일이 지정된 필드 세트 / 범례가 작동합니다.

<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>

필드 세트의 의도 된 목적은 양식 필드를 논리적으로 그룹화하는 것입니다. willoler가 지적했듯이 text-align: center스타일은 legend요소에 적용 되지 않습니다 . align="center"HTML은 더 이상 사용되지 않지만 모든 브라우저에서 텍스트를 올바르게 가운데에 배치해야합니다.

부트 스트랩 그리드 :

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;
}

상대 위치를 사용하고 부모에서 높이를 설정할 수 있습니다.

.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>

여기에 배경 기술이없는 CSS 만있는 간단한 솔루션이 있습니다 ...

.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>

바이올린 예 : https://jsfiddle.net/0Lkj6wd3/

<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

사악한 해킹 ...

2 살짜리 게시물을 범핑하지만 여기에 하나의 요소와 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;
}

그리고 여기 그것을 확인하는 바이올린이 있습니다 : http://jsfiddle.net/sRhBc/ (국경을 위해 찍은 구글의 무작위 이미지).

이 방법의 유일한 단점은 IE7을 지원하지 않는다는 것입니다.

그냥 사용

    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;
    }

1 년이 되었음에도 불구하고 내 첫 번째 게시물을 Woohoo. 래퍼의 배경색 문제를 피하기 위해 hr과 함께 인라인 블록을 사용할 수 있습니다 (명백하게 말한 사람은 없음). 텍스트 정렬은 인라인 요소이므로 올바르게 가운데에 위치해야합니다.

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

h1중간에 스팬이있는를 사용합니다 .

HTML 예 :

<h1><span>Test archief</span></h1>

CSS 예 :

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

그렇게 간단합니다.

위를 보면 다음과 같이 수정되었습니다.

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>

잘 작동하는 것 같습니다.

@kajic의 솔루션을 취하고 CSS에 스타일을 적용하십시오.

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

그런 다음 CSS (그러나 n 번째 선택기를 사용하는 CSS3에 따라 다름) :

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

건배.

(PS tbody 및 tr에서 Chrome, IE 및 Firefox는 적어도 tbody 및 tr을 자동으로 삽입하므로 @ kajic 's와 같은 샘플에 필요한 HTML 마크 업에서 더 짧은 시간을 유지하기 위해 이러한 샘플이 포함되어 있지 않습니다. 2013 년 기준 최신 버전의 IE, Chrome 및 Firefox에서 테스트되었습니다.

데모 페이지

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; }

이것은 나를 위해 일했으며 테두리 선을 숨기기 위해 텍스트 뒤에 배경색이 필요하지 않고 대신 실제 시간 태그를 사용합니다. 폭을 가지고 놀아서 다양한 크기의 hr 라인을 얻을 수 있습니다.

<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>

FlexBox를 사용 하는 바이올린 을 만들었고 HR의 다른 스타일 (더블 라인, 라인 중앙의 심볼, 그림자, 삽입, 점선 등)을 제공합니다.

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>&nbsp;</p>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p>&nbsp;</p>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center fixed">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>

또는 여기 대화 형 Fiddle이 있습니다 : http://jsfiddle.net/mpyszenj/439/

을 수행하고 fieldset"legend"요소 ( "다음 섹션"텍스트)를 필드의 가운데에만 border-top설정 하여 시도해 볼 수 있습니다. fieldset 요소에 따라 범례가 어떻게 배치되는지 확실하지 않습니다. margin: 0px auto그러나 트릭을 수행하는 것이 간단 할 수 있다고 생각합니다 .

예 :

<fieldset>
      <legend>Title</legend>
</fieldset>

없이이 작업을 수행 할 수 있습니다 <hr />. 의미 적으로 디자인은 CSS를 사용하여 수행해야합니다.이 경우에는 가능합니다.

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">&nbsp;</div>
</div>

항상 좋은 FIELDSET이 있습니다

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

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;
}

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>

"span"태그의 텍스트 길이에 따라 "side"및 "middle"클래스의 너비를 수정할 수 있습니다. "가운데"의 너비에 "가로"의 너비의 2 배에 100 %를 더한 것을 확인하십시오.

반응 형, 투명 배경, 가변 높이 및 구분선 스타일, 가변 텍스트 위치, 구분선과 텍스트 사이의 거리 조정 가능. 동일한 프로젝트에서 여러 디바이더 스타일에 대해 다른 선택기로 여러 번 적용 할 수도 있습니다.
아래 SCSS.

마크 업 (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;
}

그렇지 않으면 text-position기본값은 가운데입니다.

데모:

.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>

그리고 SCSS는 , 그것을 신속하게 수정합니다 :

$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;
    }
}

여기에 바이올린 .

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}

<div>
   <hr> <span class="orSpan">OR</span>
</div>

여백 속성 을 조정해야 할 수도 있습니다

<div class="divider-line-x"><span>Next section</span></div>

/***** Divider *****/

.divider-line-x {
    position: relative;
    text-align: center; 
    font-family: Arial; 
    font-weight: bold;
    font-size: 12px;    
    color: #333;
    border-bottom: 1px dashed #ccc;
}

.divider-line-x span {
    position: relative; 
    top: 10px;
    padding: 0 25px;    
    background: #fff;
}