3

I know flex is very useful these days and I'm also a fan of using 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.

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jin Ho Bryan Lee
  • 67
  • 1
  • 6

3 Answers3

2

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

#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.

.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>
heyitsjhu
  • 951
  • 7
  • 9
0

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

<div class="row">
   <div class="logo"></div>
   <div class="text"></div>
</div>
.row{
   display:flex;
   justifiy-content:space-between;
}
Paco Gómez Capón
  • 485
  • 7
  • 17
0

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%;  

}
Paco Gómez Capón
  • 485
  • 7
  • 17