중간에 텍스트가있는 수평 규칙을 만들려고합니다. 예를 들면 다음과 같습니다.
———————————– 내 제목은 여기 ———— —————–
CSS에서 그렇게하는 방법이 있습니까? 모든 “-“없이 분명히 대시.
답변
이것은 대략 내가하는 일입니다. 선 border-bottom에 포함 h2을 설정 한 다음 h2더 작게 line-height만듭니다. 그런 다음 텍스트가 span불투명 한 배경 으로 중첩 됩니다.
h2 {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
padding:0 10px;
}<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>Chrome에서만 테스트했지만 다른 브라우저에서 작동하지 않을 이유는 없습니다.
JSFiddle : http://jsfiddle.net/7jGHS/
답변
다른 솔루션을 시도한 후 다른 텍스트 너비, 가능한 배경 및 추가 태그를 추가하지 않고 유효한 것을 제공했습니다.
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}<h1>Heading</h1>
<h1>This is a longer heading</h1>IE8, IE9, Firefox 및 Chrome에서 테스트했습니다. 여기서 확인할 수 있습니다 http://jsfiddle.net/Puigcerber/vLwDf/1/
답변
좋아, 이것은 더 복잡하지만 IE <8 이외의 모든 것에서 작동합니다.
<div><span>text TEXT</span></div>
div {
text-align: center;
position: relative;
}
span {
display: inline-block;
}
span:before,
span:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.2em;
}
span:after {
right: 0;
left: auto;
}: before 및 : after 요소는 절대적으로 배치되므로 하나는 왼쪽으로, 하나는 오른쪽으로 당길 수 있습니다. 또한 너비 (이 경우 40 %)는 텍스트 내부의 너비에 매우 의존합니다. 그에 대한 해결책에 대해 생각해야합니다. 최소한 top: 1.2em글꼴 크기가 다른 경우에도 줄이 텍스트 중앙에 어느 정도 유지됩니다.
그래도 잘 작동하는 것 같습니다 : http://jsfiddle.net/tUGrf/3/
답변
가장 짧고 가장 좋은 방법 :
span:after,
span:before{
content:"\00a0\00a0\00a0\00a0\00a0";
text-decoration:line-through;
}<span> your text </span>답변
Flex 기반 솔루션은 다음과 같습니다.
h1 {
display: flex;
flex-direction: row;
}
h1:before, h1:after{
content: "";
flex: 1 1;
border-bottom: 1px solid #000;
margin: auto;
}
h1:before {
margin-right: 10px
}
h1:after {
margin-left: 10px
}<h1>Today</h1>답변
나중에 (현재) 브라우저 및 display:flexandd를 pseudo-elements 사용하면 쉽게 그릴 수 있습니다. border-style, box-shadow심지어 background화장 너무 도움이됩니다.
h1 {margin-top:50px;
display:flex;
background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
color:white;
content:'';
flex:1;
border-bottom:groove 2px;
margin:auto 0.25em;
box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}<h1>side lines via flex</h1>답변
.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">Text</div>