logo引入快速居中技巧

最新推荐文章于 2024-10-01 23:23:32 发布

魏似任

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量198

点赞数 2

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

本文链接：https://blog.csdn.net/Ericfighter/article/details/142645109

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前会在大区域内套一个小div盒子然后通过外边距来实现居中效果，但是涉及中心居中（水平 + 垂直居中），使用margin标签较麻烦。

这里提供一个简便方法，首先在container容器中使用弹性盒子属性flex，然后使用行内标签img引入图片，因为在弹性盒子下，所以这里可以设置标签的长宽

以下是代码部分

css代码

首先设置了统一样式，将外边距和内边距设置为0，同时设置了一个怪异盒子模型，使得盒子的大小完全是div大小，不包括内外边距

其后是设置容器和img标签的样式

<style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;

        }

        .container {
            display: flex;
            width: 100%;
            height: 80px;
            border: 1px solid red;
        }
        /* logo图片引入 */
        .container #logo{
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 80px;
        }

        .container .div1 {
            width: 100px;
            height: 100%;
            border: 1px solid red;

        }
    </style>

html部分代码

这里设置了一个外部容器盒子，内部有img标签和一个小div盒子

<body>
    <div class="container">
        <img src="img/logo.svg" id="logo">
        <div class="div1"></div>
    </div>
</body>

魏似任

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录