這是我到目前爲止：http://jsfiddle.net/F8AN4/如何在div上創建垂直居中的會議邊界？

我想在垂直居中，並指向屏幕的左側/右側div的每邊的邊界。我已經看到了這一點，但是我不知道該怎麼做！

它看起來像：

-----|DIV|------

CSS

div { 
    background: lightgreen; 
    height: 100px; 
    margin: 0 auto; 
    position: relative; 
    width: 200px; 
} 

div::after { 
    border-right: 10px solid black; // not sure how to do this. 
    content: ""; 
    top: 0; left: 0; right: 0; bottom: 0; 
    position: absolute;  
} 

div::before { 
    content: ""; 
    top: 0; left: 0; right: 0; bottom: 0; 
    position: absolute;  
}

任何想法？

來源

2013-12-16 Stigma

你能告訴我們什麼顯示你需要（上傳圖片imgur圖像並分享它的網址） – Zword

您將需要兩條包裝容器：即包含內容的內部DIV和外格：

<div class="outer"> 
    <div class="inner"></div> 
</div>

CSS很簡單—外部div將需要100％寬度（以便僞元素可以拉伸到全部寬度），而內部div可以具有稍後指定的寬度。

.inner { 
    background: lightgreen; 
    height: 100px; 
    margin: 0 auto; 
    width: 200px; 
} 
.outer { 
    position: relative; 
    width: 100%; 
} 
.outer:before { 
    border: 1px solid #000; 
    box-sizing: border-box; 
    content:""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    width: 100%; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

的CSS變換屬性用於確保僞元素完美地垂直居中 - 當你想水平線厚它很重要。

如果您需要水平線的奇數尺寸，您可以選擇指定單個邊界的高度，即border-top: 1px solid #000;，或放棄border屬性並設置高度和背景色。它的工作原理無論哪種方式:)

http://jsfiddle.net/teddyrised/F8AN4/9/

[編輯]：卸下外層div的底部邊緣，這是沒有必要的代碼工作;）

來源

2013-12-16 14:09:35 Terry

您只需將左/右邊框添加到'.inner'，即可完成。 –

@MarcAudet它不起作用，因爲左右邊框將跨越元素的整個高度。據我瞭解OP的要求，他想要一些與線條更接近的東西，而不是全高邊框。 – Terry

我的意思是OP除了水平線之外還想要垂直邊框。我基於我對ExtPro的答案發表評論，這似乎是OP想要的。 –

FIDDLE

HTML

<div><span>TEXT</span></div>

CSS

div { 
    margin-top:10px; 
    height: 1px; 
    border-top: 1px solid black; 
    text-align: center; 
    position: relative; 
} 
span { 
    position: relative; 
    top: -.7em; 
    background: lightgreen; 
    display: inline-block; 
    border-width:0 2px; 
    border-color:black; 
    border-style:solid; 

}

來源

2013-12-16 14:05:08 SW4

謝謝，這就是我正在尋找...但有沒有一種方法，不需要額外的標記和硬編碼的長度？字體大小對於div是動態的。 – Stigma

您確實需要額外的標記才能對文本元素（特別是填充和背景顏色）進行任何樣式控制。您需要父/外部div來生成並放置水平線和子/內部div來包含和設置文本樣式。 –

這是你在找什麼？

http://jsfiddle.net/F8AN4/3/

我想有一個更華麗的方式做到這一點也許有人還有更好的主意:)

<div id="main"> 
    <div class="hrleft"></div> 
    <div class="mid"></div> 
</div> 

div.hrleft { 
    height: 45px; 
    width: 200px; 
    border-bottom: 10px solid black; 
    float: left; 
}

來源

2013-12-16 14:13:10 xeraphim

如何在div上創建垂直居中的會議邊界？

回答

FIDDLE

相關問題