Question

我正在玩flexbox，我在codepen上找到了这个，我想知道，我怎么能把它垂直放？我试图将边框改为顶部和底部，但它消失了。

HTML：

<div>
  <h1>Hello World!</h1>
</div>

CSS：

h1 {
  color: #444;
  font-family: sans-serif;
  font-size: 2.625em;
  text-align: center;
  padding: 5rem 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
h1::before, h1::after {
  align-self: center;
  background: #999;
  background-clip: content-box;
  box-sizing: border-box;
  content: " ";
  flex-grow: 1;
  height: 0.2em;
}
h1::before {
  border-right: 1.5625em solid transparent;
}
h1::after {
  border-left: 1.5625em solid transparent;
}

The example here

Answer 1

虽然这个问题包含一些含糊不清的内容，但我希望能够“猜测”这个问题。完全是你的意图。

您可能希望创建一个垂直拆分＆＃39;的文字，如：

  ||
 TEXT  
  ||

可以使用一些伪元素来完成：

＆＃13;

h1 {
  text-align: center;
  font-size: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  word-spacing: -4px;
}
h1:before,
h1:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  border-lefT: 5px solid black;
  border-right: 5px solid black;
  left: 50%;
  transform: translateX(-50%);
}
h1:before {
  bottom: 0;
}
h1:after {
  top: 0;
}

＆＃13;

<h1>SOME TEXT</h1>

＆＃13;

但是，如果您要在文本的任一侧创建行，例如：

|      |
| TEXT |
|      |

您可以使用边框，将h1元素设置为display:inline-block

＆＃13;

body {
  text-align: center;
}
h1 {
  text-align: center;
  display: inline-block;
  padding: 20px;
  border-left: 5px solid black;
  border-right: 5px solid black;
}

＆＃13;

<h1>SOME TEXT</h1>

＆＃13;

文本/分隔符之间的行

1 个答案: