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

发布时间：2024年01月11日

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>

文章来源:https://blog.csdn.net/2301_76671906/article/details/135519520
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章