【CSS】图文居中排列-CFANZ编程社区

【CSS】图文居中排列

0、原始代码

<style>.box{
    border: 1px solid red;
  }</style>
<body>
  <div class="box">
    <img src="./icon.jpg" alt="">
    <span>我是头像</span>
  </div>
</body>

【CSS】图文居中排列_css

1、横排居中

1.1 vertical-align: middle

<style>
    .box{
      border: 1px solid red;
    }
    .box img{
      vertical-align: middle;
    }
    .box span{
      background-color: green;
    }

【CSS】图文居中排列_ico_02

1.2 display: flex

<style>
    .box{
      border: 1px solid red;
      display: flex;
      align-items: center;
    }

    .box span{
      background-color: green;
    }

【CSS】图文居中排列_ico_03

2、水平居中

2.1 text-align: center;

<style>
    .box{
      border: 1px solid red;
      text-align: center;
    }
    .box img{
      vertical-align: middle;
    }
    .box span{
      background-color: green;
    }

【CSS】图文居中排列_ico_04

2.2 display: flex;

<style>
    .box{
      border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .box span{
      background-color: green;
    }

【CSS】图文居中排列_垂直居中_05

3、垂直居中

3.1 display: flex;

<style>
    .box{
      border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .box span{
      background-color: green;
    }

【CSS】图文居中排列_ico_06

3.2 margin: 0 auto;

<style>
    .box{
      border: 1px solid red;
      text-align: center;
    }
    .box img {
      margin: 0 auto;
      display: block;
    }
    .box span{
      background-color: green;
    }

【CSS】图文居中排列_ico_07

0 条评论