css - 真ん中に文字が入った縦線の作り方

Question

真ん中にテキストがある垂直線を作成しようとしています。cssでこれを達成する方法がわかりません。

画像を見る

Answer 1

実際には、多くの方法。

それらの中の一つ：

html

<div class="wrapper">
    <div class="line"></div>
    <div class="wordwrapper">
        <div class="word">or</div>                                        
    </div>
</div>​

CSS

.wrapper {
    position: relative;
    width: 250px;
    height: 300px;
    border: 1px dashed #ccc;
    margin: 10px;
}

.line {
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
    z-index: 1;
}

.wordwrapper {
    text-align: center;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -12px;
    z-index: 2;
}

.word {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px;
    font: bold 12px arial,sans-serif;
    background: #fff;
}

</p>

例を参照してください: http://jsfiddle.net/zmBrR/22/

Answer 2

背景画像なしでそれを行う方法は次のとおりです。固定の高さにかなり依存しています。垂直方向に完全に揃えるには、display: table-cell を使用する必要があります。

http://jsfiddle.net/mstauffer/uyTB7/

HTML:

<div class="container">
    <div class="side">Left side</div>
    <div class="or">
        <div class="or-line"></div>
        <div class="or-label">Or</div>
    </div>
    <div class="side">Right side</div>
</div>

CSS:

.container {
    padding: 1em;
}
.side, .or {
    float: left;
    height: 6em;
    text-align: center;
}
.side {
    width: 40%;
}
.or {
    position: relative;
    width: 20%;
}
.or-line {
    float: left;
    width: 50%;   
    border-right: 1px solid #aaa;
    height: 6em;
}
.or-label {
    background: #fff;
    color: #aaa;
    height: 1em;
    left: 50%;
    margin-left: -1.25em;
    margin-top: 2em;
    padding: .5em;
    position: absolute;
    text-transform: uppercase;
    width: 1em;
}
​

基本的に、.or-line50% で線を作成するために使用しています。絶対に配置された;を含むように設定.orしています。手動で中央の 50% に配置し、負の左マージンで線をまたいで調整します。次に、パディングでサイズを拡大し、 で垂直方向に押し下げます。position: relative;.or-label.or-labelmargin-top

Answer 3

マークアップの<div>周りに配置し、次のように CSS を使用します:-

 <div class="verticalLine">
   some other content
  </div>

CSSで： -

 .verticalLine {
border-left:thick solid #ff0000;
 } 

または、これを試すことができます:-

<style type="text/css">
 #your_col {
  border-left: 1px solid black;
  }
</style>

<div id="your_col">
  Your content here
</div>