수평줄 가운데에 가운데 텍스트 추가
나는 xhtml 1.0 strict에서 텍스트의 양쪽에 줄을 만들기 위해 어떤 옵션이 있는지 궁금합니다.
섹션 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%"> </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>
정렬 문제 외에도 두 가지 옵션 모두 '퍼지'하게 느껴지는데, 혹시 이전에 이를 보고 우아한 해결책을 알고 계셨다면 정말 감사하겠습니다.
어때요?
<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>이 JSFidle을 확인해 보세요.
또는 를 사용하여 응답할 수 있습니다.
Flexbox가 솔루션입니다.
.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>오늘날 모든 브라우저가 이를 지원하며, 필요한 경우 각 벤더 접두사를 추가하여 10년 전 브라우저와의 호환성을 보장할 수 있습니다.어쨌든 우아하게 저하될 것입니다.
너비와 배경색을 몰라도 이를 해결하는 방법은 다음과 같습니다.
구조.
<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/
이중선
이중 선을 작성하려면 다음 옵션 중 하나를 사용합니다.
선 사이의 고정된 공간
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 4px double red;
예: http://jsfiddle.net/z8Hnz/103/
선 사이의 사용자 지정 공백
.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/
SAS(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 및 :before를 사용하여 이 작업을 수행할 수 있으며, 이러한 작업을 사용하면 줄 바꿈의 스타일을 향상시킬 수 있습니다.예를 들어, 이중 선, 점선 등을 만들기 위해 수정할 수 있습니다.
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>
부트스트랩 그리드:
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;
}
이 CSS를 할 수 , 하지 않는 CSS를 , 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>
필드 집합의 목적은 양식 필드를 논리적으로 그룹화하는 것입니다.했듯이, 윌가지적이듯했러,이▁a듯,text-align: center는 의스일에않습니다지되용적에서 .legend요소들.align="center"HTML은 더 이상 사용되지 않지만 모든 브라우저에서 텍스트를 올바르게 중앙에 배치해야 합니다.
상대적 위치를 사용하여 부모의 높이를 설정할 수 있습니다.
.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>
예제 fiddle: https://jsfiddle.net/0Lkj6wd3/
부트스트랩 4에서는 이것이 나에게 효과가 있는 것 같습니다.
<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>
사악한 해킹...
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을 지원하지 않는다는 것입니다.
우후 나의 첫 게시물은 비록 이것이 1년이 되었지만.래퍼의 배경색 문제를 방지하기 위해 hr과 함께 인라인 블록을 사용할 수 있습니다(아무도 명시적으로 그렇게 말하지 않았습니다).텍스트 정렬은 인라인 요소이므로 가운데에 올바르게 정렬해야 합니다.
<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>
사용합니다.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; }
건배.
(P.S. Onbody and tr, Chrome, IE 및 Firefox는 적어도 자동으로 body 및 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 태그를 사용합니다.폭을 가지고 놀면 다양한 크기의 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>
그냥 사용
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;
}
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> </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>
또는 여기 대화형 Fiddle이 있습니다. http://jsfiddle.net/mpyszenj/439/
당신은 시도해 볼 수 있습니다.fieldset필드 중간에 "다음 섹션" 요소("다음 섹션" 텍스트)를 정렬합니다.border-top필드 집합 요소에 따라 범례가 어떻게 배치되는지 잘 모르겠습니다.내 생각엔 그냥 단순할 수도 있어요margin: 0px auto하지만 그 속임수를 쓰는 것.
예:
<fieldset>
<legend>Title</legend>
</fieldset>
CSS Flex 속성을 사용할 수 있습니다.
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;
}
항상 좋은 오래된 FIELDSET가 있습니다.
fieldset
{
border-left: none;
border-right: none;
border-bottom: none;
}
fieldset legend
{
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
.orSpan{
position: absolute;
margin-top: -1.3rem;
margin-left:50%;
padding:0 5px;
background-color: white;
}<div>
<hr> <span class="orSpan">OR</span>
</div>마진 속성을 조정해야 할 수 있습니다.
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;
}
부트스트랩과 함께 사용해 보십시오.
<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>
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;
}
}
언급URL : https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-horizontal-rule
'programing' 카테고리의 다른 글
| 아약스 vs.웹 소켓 대웹 작업자 (0) | 2023.09.01 |
|---|---|
| Spring 프로필에서 @PropertySources를 선택할 수 있습니까? (0) | 2023.09.01 |
| C 프로그래밍 언어에서 선언 시 2D 배열 초기화 (0) | 2023.09.01 |
| 다른 데이터베이스에 있는 하나의 데이터베이스에서 MySQL (0) | 2023.09.01 |
| MySQL 데이터베이스에서 이름 패턴과 일치하는 모든 테이블 잘라내기 (0) | 2023.09.01 |