首页html实现中间文字两边横线

html实现中间文字两边横线

时间: 2023-08-17 21:49:39 浏览: 165

你可以使用HTML和CSS来实现中间文字两边横线的效果。下面是一种实现方式： ```html <!DOCTYPE html> <html> <head> <style> .line-wrapper { display: flex; align-items: center; } .line { flex-grow: 1; height: 1px; background-color: black; } .text { margin: 0 10px; } </style> </head> <body> <div class="line-wrapper"> <div class="line"></div> <div class="text">中间文字</div> <div class="line"></div> </div> </body> </html> ``` 这段代码中，我们使用了flex布局来实现中间文字和两边横线的对齐。`.line-wrapper`类是一个包裹元素，它使用`display: flex;`和`align-items: center;`将其中的子元素垂直居中对齐。 `.line`类定义了横线的样式，通过设置`flex-grow: 1;`使其占据剩余空间的宽度，并设置`height: 1px;`和`background-color: black;`来定义横线的高度和颜色。 `.text`类定义了中间文字的样式，通过设置`margin: 0 10px;`来给文字添加左右间距。你可以将上述代码复制到一个HTML文件中并在浏览器中打开，就可以看到中间文字两边横线的效果了。

阅读全文