FIDDLE

Question

我希望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;    
}

有什么想法吗？

Answer 1

您将需要两个包装容器：一个保存内容的内部div和一个外部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;，或放弃边框属性并设置高度和背景颜色。无论哪种方式都有效:)

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

[编辑]：删除外部div上的下边距，代码无需工作;）

Answer 2

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;

}

Answer 3

这是你要找的吗？

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;
}

如何在div上创建垂直居中的会议边框？

3 个答案:

FIDDLE