vue实现带图片的标题栏

最新推荐文章于 2025-04-10 15:50:42 发布

tjzc1352640

最新推荐文章于 2025-04-10 15:50:42 发布

阅读量5.3k

点赞数

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

本文链接：https://blog.youkuaiyun.com/tjzc1352640/article/details/78346564

版权

前端学习专栏收录该内容

18 篇文章

订阅专栏

在CSS布局中，创建一个包含图片和文字的标题栏，需要对父元素`m-header`设置`position`属性，设定高度，`text-align`居中，并通过设置`font-size`为0消除图片和文字间间隙。子元素`icon`和`text`应用`inline-block`显示，`vertical-align`设为`top`以保持对齐，同时`line-height`与父元素相同以实现单行文字的垂直居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般的标题中需要一个图片和文字标题如下，m-header中包含两个元素，一个是图片icon，另外一个是文字text

<div class="m-header">
    <div class="icon"></div>
    <h1 class="text">Chicken Music</h1>
  </div>

这种情况下在css中首先需要给父元素m-header设置position属性，方便后续定位，然后设置高度，并且设置text-align值为center，使内容居中，同时设置font-size值为0，使图片和文字之间没有空隙。对于icon和text，由于都需要在一个标题栏中，它们的display属性都应设置为inline-block，图片的设置前面的博客中有描述，为了图片和文字的中心线对齐，都应设置vertical-align属性，在本文中都设置为top，同时为了使h1高度和m-header一致，设置line-height和父元素一致，可完美填充父元素，设置line-height与父元素一致可以使单行文字的垂直居中对齐（有关line-height元素的详细使用）

.m-header
    position: relative
    height: 44px
    text-align: center
    color: $color-theme
    font-size: 0
    .icon
     display: inline-block
     vertical-align: top
     margin-top: 6px
     width: 30px
     height: 32px
     margin-right: 9px
     bg-image('logo')
     background-size: 30px 32px
    .text
      display: inline-block
      vertical-align: top
      line-height: 44px
      font-size: $font-size-large

带图片的标题