텍스트의 수직 중심선

로그인/등록 상자에서 두 개의 버튼을 이와 같이 텍스트로 구분해야합니다.텍스트의 수직 중심선

<button class="facebookSux">Ingresa con Facebook</button> 
<label>o si prefieres</label> 
<button class="register">Regístrate con tus datos</button>

어떻게 난 단지 CSS와 라벨의 수평 라인을 얻을 수 있습니다 : 내 HTML 코드의 존재와

내가 고려한 한 가지 해결책은 선형 그래디언트를 적절히 사용하는 것이지만이를 달성하는보다 세련된 방법이 있어야합니다.

출처

2012-12-12 Mario

당신이 jsfiddle을 게시 할 수 있습니까? – Nelson

내가 this solution을 제안하는 경우도 스타일을 지정할 수이 세 태그, 주변에 컨테이너가 가정합니다.

Screenshot

마크 업 (변경되지 않은) :

<div> 
    <button>Ingresa con Facebook</button> 
    <label>o si prefieres</label> 
    <button>Regístrate con tus datos</button> 
</div>

스타일 시트 :

div { 
    width: 250px; 
    text-align: center; 
    overflow: hidden; 
} 
button { 
    width: 100%; 
} 
label { 
    padding: 0 1em; 
    position: relative; 
} 
label::before, 
label::after { 
    width: 125px; /* =250/2 */ 
    height: 0; 
    border-top: 1px solid #000; 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    top: 50%; 
    right: 100%; 
} 
label::after { 
    left: 100%; 
}

출처

2012-12-12 19:27:19 NGLN

이 질문을 게시 한 직후 나는 당신과 매우 흡사 한 솔루션을 생각해 냈습니다. 스타일링을 위해 가비지 (빈 요소) HTML을 추가 할 필요가없는 유일한 사람이라는 이유로이 대답을 선택합니다. 간단히 말해서, 당신은 실제로 제가 묻고있는 것과 정확히 일치했습니다. – Mario

당신은 확실히 당신이의 <hr /> 태그를 사용할 수있는이 개 된 div 및 위치

Demo

HTML

<div class="wrapper"> 
    <div class="line"></div> 
    <div class="text">Hello</div> 
</div>

CSS

.wrapper { 
    margin: 30px; 
    position: relative; 
    width: 300px; 
} 

.line { 
    height: 1px; 
    background-color: #000000; 
} 

.text { 
    background: #ffffff; 
    display: inline-block; 
    position: absolute; 
    top: -15px; 
    left: 128px; 
    padding: 5px; 
}

출처

2012-12-12 15:54:18

데모에서 더 많은 텍스트를 추가하면 더 이상 텍스트가 가운데에 머물러 있지 않습니다. 적어도 수평선은 등 길이가 아닙니다. –

@SushantGupta 이것이 의미하는 바를 알고 있다면 수동으로 크기를 조정해야합니다. OP에는 동적 텍스트가 없습니다 –

@MrAlien 사실 저는 CSS를 모르겠습니다. 나는 당신의 JSFiddle 데모를보고 있었고 예상 한 결과를 얻지 못했습니다. 그래서 내가 본 것을 공유 할 생각이었습니다.어쨌든, CSS 초보자에게 전화 할 가치가 없기 때문에 어쨌든 내 생각을 무시할 수 있습니다. P : 그런데 Congrats, 새로운 특권을 위해 –

를 사용할 수 있습니다. <hr /> 태그를 단일 검정색 선으로 스타일을 지정할 수 있습니다. CSS를 사용하여 올바른 위치에 배치 할 수 있습니다.

검은 선으로 <hr /> 태그를 스타일링이 사용

hr { 
     border: 1px; 
     height: 1px; 
     color: #000000; 
     background-color: #000000; 
}

출처

2012-12-12 15:59:19 MartenBE

'border : 0px;'도 유효합니다. – MartenBE

: http://jsfiddle.net/tErMn/

당신은 동적 텍스트 위치에만 CSS로 라인을 가지고있다.

트릭은 display: inline-block;, margin: auto; 및 z-index입니다.

HTML

<div class="container">  
    <div class="text">Hello</div> 
    <div class="line"></div> 
</div>

CSS

.container{ 
    width: 300px; 
    text-align: center; 
} 

.text{ 
    background-color: white; 
    padding: 5px 20px; 
    position: relative; 
    z-index:1; 
    margin: auto; 
    display: inline-block; 

} 

.line { 
    height: 1px; 
    width: 100%; 
    background-color: black; 
    margin-top: -15px; 
}

출처

2012-12-12 16:33:57

텍스트의 수직 중심선

답변

관련 문제