css 如何创建一个文本居中的竖线

b5buobof 于 2023-01-14 发布在其他

关注(0)|答案(7)|浏览(177)

我正在尝试创建一个垂直线与文本在中间。我不知道如何在css中实现这一点。
参见图片

css

来源：https://stackoverflow.com/questions/13598148/how-to-create-a-vertical-line-with-a-text-in-the-middle

7条答案

按热度按时间

a7qyws3x1#

实际上，很多方面。
其中之一：
超文本标记语言

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

参见示例：http://jsfiddle.net/zmBrR/22/

赞(0）回复(0）举报 2023-01-14

zbq4xfa02#

这里有一种不用背景图片的方法，它非常依赖于一个固定的高度;你必须使用display：表格单元格，使其完全垂直对齐。
http://jsfiddle.net/mstauffer/uyTB7/
超文本：

<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-line创建一条50%的线;你设置.or到position: relative;来包含绝对定位的.or-label;手动将.or-label定位在中间50%的位置，然后用负左边距将其调整回该行，然后用填充扩展其大小，并用margin-top垂直向下突出。

赞(0）回复(0）举报 2023-01-14

aydmsdu93#

这是带有柔性盒的解决方案：https://jsfiddle.net/1z0runv9/1/

.wrapper {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
}

.or-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #d3d7da;
}

.vertical-line {
  border-left: 1px solid #d3d7da;
  flex-grow: 1;
  width: 1px;
}

<div class="wrapper">
   <div class="or-separator">
     <div class="vertical-line"></div>
     <div>Or</div>
     <div class="vertical-line"></div>
   </div>
 </div>

赞(0）回复(0）举报 2023-01-14

nnt7mjpx4#

在标记周围加上<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>

赞(0）回复(0）举报 2023-01-14

6pp0gazn5#

您可以使用jquery做同样的事情。在HTML文档中导入jquery cdn
选择所需项目并为其编写JavaScript代码。
考虑这个例子

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
 <style type="text/css">
 .completed{
 color: gray;
 text-decoration: line-through;
 }
 </style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
    <li>aaa </li>
    <li>bbb </li>
    <li>ccc </li>
 </ul>
</div>
<script type="text/javascript" >
`enter code here`

$("li").click(function () {
$(this).css("color","gray");    
$(this).css("text-decoration","line-through");
});
or 
$("li").click(function () {
$(this).toggleClass("completed");

});
</script>
</body>
</html>

在本例中，line被传递到list（li）元素上。

赞(0）回复(0）举报 2023-01-14

zc0qhyus6#

不管问什么问题，我在这里都是朝着两个方向采取一种相当简单的方法。

.demo-body{
height: 400px;
}

.line-wrapper{
    background: black;
    width: 2px;
    height: 100%;
    position: relative;
 }
 
 .line-wrapper .word{
    position: absolute;
    background: white;
    top: 50%;
    transform: translate(52%,-50%);
    right: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
  }
  
.line-wrapper .word.vertical{
   writing-mode: tb-rl;
}

<div class="demo-body">

<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
  <div class="word">OR</div>
</div>

<br>

<!-- VERTICAL TEXT -->
<div class="line-wrapper">
  <div class="word vertical">OR</div>
</div>

</div>

赞(0）回复(0）举报 2023-01-14

jtw3ybtb7#

例如，可以使用flexbox将其存档

body {
  position: relative;
  height: 100vh;
}

.vertical {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-10px);
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  color: #999;
}

.vertical .line {
  width: 1px;
  flex: 1;
  background: #999;
}

<div class="vertical">
  <div class="line"></div>
  <div class="text">OR</div>
  <div class="line"></div>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何创建一个文本居中的竖线

7条答案

相关问题

热门标签

最新问答