小5聊前端基础知识之浮动块如何垂直居中并排显示

Posted 2021-09-06 小5聊

运用场景描述

网站顶部有固定200px高度的行，左边显示图标右边显示导航菜单，如何把图标和菜单都居中显示

1、图标和菜单都浮动的效果

<div style="width: 500px;height: 100px;background: #eee;margin-bottom: 49px;">
    <div style="float: left;background: #ccc;">
     <img src="https://img-home.csdnimg.cn/images/20201124032511.png" style="height: 50px;">
    </div>
    <div style="float: left;background: #c3c3c3;">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
    </div>
</div>

 2、设置居中显示方法一

使用flex弹性布局，以及配合使用align-items:center;即可实现居中效果

• 详细样式如下

 

  

•  源码

 

<div style="width: 500px;height: 100px;background: #eee;margin-bottom: 49px;display: flex;align-items: center;">
    <div style="float: left;/* background: #ccc; */margin-left: 15px;">
     <img src="https://img-home.csdnimg.cn/images/20201124032511.png" style="height: 50px;">
    </div>
    <div style="float: left;/* background: #c3c3c3; */margin-left: 30px;">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
    </div>
</div>