How to align icon to the left and text to the center by using flex?

debugcn Published at Dev

Jin Ho Bryan Lee

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>

heyitsjhu

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.