如何使用flex将图标左对齐并将文本对齐到中心？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

Center and right align flexbox elements 2 answers
中心和右对齐flexbox元素2个答案

I know flex is very useful these days and I'm also a fan of using flex.

我知道flex这些天非常有用，我也是使用flex的粉丝。

For my project, I'm trying to align icon to the left and text to the center by using flex but it's not working.

对于我的项目，我试图通过使用flex将图标向左对齐并将文本发送到中心，但它不起作用。

How to align center for the text when putting icon to the left?

将图标置于左侧时如何对齐文本中心？

.window-recommendation {
  background-color: #262931;
  width:100%;
  height:100vh;
  overflow:auto;
  position:relative;
  transform:translateX(0);
  transition:all 0.3s;
}


.top-recommendation {
  display: flex;
  height:50px;
  align-items: center;
  justify-content: space-between;
}

.top-artist {
  background-color: #FFF;

}

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Omnibag Project</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link href="assets/css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="window-recommendation">
  <div class="top-recommendation top-artist">
          <i class="material-icons main-left-arrow-artist">keyboard_arrow_left</i>
          <div class="grid-item-artist">Profile</div>
  </div>
        
</div>

3 个解决方案

#1

I don't think you can do it easily with flex-box. You can, however, position the element in the center.

我不认为你可以用flex-box轻松完成。但是，您可以将元素放在中心位置。

#text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Where #text is the element with the word 'Profile'. You change the id or use a class name, if you want.

其中#text是带有'Profile'一词的元素。如果需要，可以更改id或使用类名。

.window-recommendation {
  background-color: #262931;
  width:100%;
  height:100vh;
  overflow:auto;
  position:relative;
  transform:translateX(0);
  transition:all 0.3s;
}


.top-recommendation {
  display: flex;
  height:50px;
  align-items: center;
  justify-content: space-between;
}

.top-artist {
  background-color: #FFF;

}

#text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Omnibag Project</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link href="assets/css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="window-recommendation">
  <div class="top-recommendation top-artist">
          <i class="material-icons main-left-arrow-artist">keyboard_arrow_left</i>
          <div class="grid-item-artist" id="text">Profile</div>
  </div>
        
</div>

#2

You have to put 2 divs in a bigger one as a row. I think your are searching for this:

你必须把2个div放在一个更大的一行中。我想你正在寻找这个：

<div class="row">
   <div class="logo"></div>
   <div class="text"></div>
</div>
.row{
   display:flex;
   justifiy-content:space-between;
}

#3

Try this.

尝试这个。

.window-recommendation {
  background-color: #262931;
  width:100%;
  height:100vh;
  overflow:auto;
  position:relative;
  transform:translateX(0);
  transition:all 0.3s;
}
.top-recommendation {
  display: flex;
  height:50px;
  align-items: center;
  justify-content: space-between;
}

.top-artist {
  background-color: #FFF;
}
.main-left-arrow-artist{
  width:10%;  
}
.grid-item-artist{
  text-align:center;
  width:90%;  

}

#1