效果预览

HTML源码

点击查看HTML代码 
<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>资源分享站 - 软件 网站 书籍文档 学习资料</title>

    <link href="css/index.css" rel="stylesheet" type="text/css">

</head>

<body>

    <header>

        <div class="box-logo">

            <a href="#" alt="资源分享站" class="logo">

                <div class="img-logo-box img-logo"

                    style="background: url(images/LOGO.png) no-repeat;background-size: 100% auto;">

                </div>

                <div class="img-logo-box text-logo">

                    萌狼工作室

                </div>

            </a>

        </div>

    </header>

</body>

</html>

CSS源码

点击查看CSS代码 
:root{

--font-main-color:black;

--background-color:snow;

--shadow-color:rgba(0,0,0,0.1);

}

*{

    margin: 0;

    padding: 0;

}

a{

    color:var(--font-main-color);

    text-decoration: none;

}

header{

    margin: 0;

    padding: 0;

    width:100%;

}

header .box-logo{

    width: 100%;

    display: flex;

    /*背景颜色*/

    background-color: var(--background-color);

    /*阴影*/

    box-shadow: 1px 1px 1px 1px var(--shadow-color);

}

header .logo{

    margin: 0;

    padding: 0.25em;

    height: 100%;

    font-size: 1.5em;

}

header .logo .img-logo-box{

    /*LOGO和文字在一行*/

    display: inline-block;

    /*LOGO和文字上下居中，实现对齐*/

    vertical-align:middle;

}

/*默认*/

@media (min-width: 767px){

    header .logo .img-logo{

        height: 1.5em;

        width: 1.5em;

    }

    header .logo .text-logo{

        font-size: 1.3em;

    }

}

/* 横向放置的手机和竖向放置的平板之间的分辨率 */

@media (max-width: 767px) {

    header .logo .img-logo{

        height: 1.2em;

        width: 1.2em;

    }

    header .logo .text-logo{

        font-size: 1em;

    }

}

/* 横向放置的手机及分辨率更小的设备 */

@media (max-width: 480px) {

    header .logo .img-logo{

        height: 1em;

        width: 1em;

    }

    header .logo .text-logo{

        font-size: 0.8em;

    }

}

关键点说明

1.【前提】父元素使用 display:flex;

2.【关键】为了让图片和文字在一行，需要使用display:inline-block;

3.【重点】vertical-align:middle;实现文字和图片对齐

4.【注意】我的图片，并不是一个<img/>标签引用图片，而是在一个div里面，设置的背景；文字也用了一个div装起来的。

【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小的更多相关文章

  1. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  2. html&css中的文字对齐问题

    html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示.   两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...

  3. css图标与文字对齐实现方法

    1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采 ...

  4. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  5. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

  6. css 图片文字对齐

    默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐 解决办法:在css中设置图片的vertical-align属性, <img src="" s ...

  7. 如何在css中设置按钮button中包含图片文字对齐方式

    <el-button class="class-management style="line-heught">班级管理

  8. 前端CSS实现图片自适应背景大小

    <body> <div> <!--背景图片--> <div id="web_bg" style="background-imag ...

  9. CSS图片两端对齐，自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  10. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

随机推荐

  1. vue前端开发仿钉图系列（3）右侧画点线面的开发详解

    项目开发是完全仿照钉图的功能,参照钉图的逻辑和高德地图的参考手册以及aip文档,一点点的把功能做出来并呈现最后的效果.选中画点,在地图上获取经纬度并进行反地理编码,添加marker并弹出右侧编辑页面, ...

  2. 收到offer之后的回复术语

    不去: 您好,非常荣幸能收到贵岗的offer, 感谢您对我能力的认可,但贵公司岗位要求/薪资结构和我预想还有一定的差距,希望今后有共事的机会,祝您工作顺利!   去: 您好,非常荣幸能够收到贵公司的o ...

  3. go：极简上手使用 stretchr/testify 进行mock测试

    库安装 首先,安装 Mock 类生成工具 Mockery: go install github.com/vektra/mockery/v2@v2.45.1 实际上,你也可以手动创建 Mock 类. 生 ...

  4. spark和scala的搭建

    Scala--部署安装步骤 (1)上传并解压安装scala安装包 例:tar -zxvf scala--** -C 指定位置 (2)设置环境变量 vim /etc/profile export SCA ...

  5. 深度解读GaussDB逻辑解码技术原理

    本文分享自华为云社区<[GaussTech技术专栏]GaussDB逻辑解码技术原理>,作者:GaussDB 数据库. 1.背景 随着国内各大行业数字化改造步伐的加快,异构数据库数据同步的需 ...

  6. centos7LDAP服务搭建

    ladp服务搭建 用户名:cn=admin,dc=test,dc=com 密码:123456 1)软件安装yum install openldap openldap-clients openldap- ...

  7. 14-8 C++函数调用运算符

    目录 14.8.0 引入 函数对象 含有状态的函数对象 函数对象常做泛型算法实参 14.8.1 lambda是函数对象 表示没有捕获值的lambda的类 表示lambda及其捕获行为的类 14.8.2 ...

  8. i-MES生产制造管理系统-可视化看板

    可视化看板最主要的目的是为了将生产状况透明化,让大家能够快速了解当前的生产状况以及进度,通过大数据汇总分析,为管理层做决策提供数据支撑,看板数据必须达到以下基本要求: 数据准确--真实反映生产情况 数 ...

  9. 如何在原生鸿蒙中进行RN热加载

    一.背景 在上一篇博客中,我分享了将RN的bundle包在原生鸿蒙开发中进行使用.但是如果我们在实际的开发过程中,每次修改完代码都需要打包,然后重新运行原生项目的话效率就有点太低了. 原生鸿蒙支持RN ...

  10. 为什么需要[EnumeratorCancellation]？

    为什么需要 [EnumeratorCancellation]? 在使用 C# 编写异步迭代器时,您可能会遇到如下警告: warning CS8425: 异步迭代器"TestConversat ...