svg代码图片水平垂直居中对齐,文本内容与icon水平对齐,无宽高div水平垂直居中

 1.实现svg在一个div中水平垂直居中-子组件

        设置高度 在外层引用的时候添加了行高 可垂直居中对齐

 style="
    display: flex;
    height:40px;
    align-items: center;"

2.父组件中的操作

html结构

         
                    

                        

                                      
                           
                        
                        
 
                             选择
                        
                    
         

css样式 

// 弹框选择icon 不设置宽度 新建时候为空不展示宽度
.select_icon{
    height:40px;
    // background-color:blue;
    line-height:40px
}
//行内块 不单独占一行 加左浮动对齐
.select_icon_picture{
    display: inline-block;
    // background-color:red;
    height:40px;
    float:left;
}
//左浮动-限定宽度限定点击事件区域
.select_icon_text{
    cursor:pointer;
    color:#1890ff;
    width:70px;
    height:40px;
    float:left;
    // background-color:green;
}

3.实现效果

        选择前 

 

        选择后效果 

 

 4.flex的水平垂直居中对齐-设置宽高

  // div内icon图标水平垂直居中以及圆
  .log_icon_picture{
    height:55px;
    width:55px;
    border-radius:27.5px;
    background-color:#47cc38;
    display: flex;
    justify-content: center;
    align-items: center;
  }

5.文本内容与icon水平对齐

      
    
      yyoy
 

6.没有固定宽高的 

 元素水平和垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置整个视口高度 */
}