css-文本垂直居中，左侧border与文字作为导航标题

最新推荐文章于 2024-06-01 14:57:49 发布

哟哟耶耶

最新推荐文章于 2024-06-01 14:57:49 发布

阅读量507

点赞数 10

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/2301_76671906/article/details/135519520

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.文本垂直居中

1.1 Flexbox 布局

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      align-items: center; /* 使用 align-items 属性垂直居中 */
      height: 200px; /* 设置容器高度 */
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

<div class="container">
  <p>垂直居中文本</p>
</div>

</body>
</html>

1.2Grid 布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: grid;
      place-items: center; /* 使用 place-items 属性垂直水平居中 */
      height: 200px; /* 设置容器高度 */
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

<div class="container">
  <p>垂直居中文本</p>
</div>

</body>
</html>

2. 左侧border与文字作为导航标题

 <div class="header_all">
        <div class="header_content" >&nbsp;
            <p>{{fatherName}}</p>
        </div>
    </div>

<style lang="less" scoped>
.header_all{
    width: 100%;
    height: 100%;
    margin: 0.5% 0 0 1%;
}
.header_content{
    height: 80%;
    max-height: 50px;
    display: flex;
    align-items: center;
    border-left: 10px solid red;
}
p{
    font-size:16px;
    color: black;
    font-weight: 500;
}
</style>