如何對齊文本旁邊的圖標？

我正在調色板項目上工作，我正在做的是將圖標放在米色文字旁邊，並將其放在右側。如何對齊文本旁邊的圖標？

但是，當我將圖標放在米色旁邊時，調色板佈局開始分解，並且圖標未與文本中心對齊。

如何解決這個問題？

下面的圖片會發現我想怎麼做。

* { 
 
    box-sizing:border-box; 
 
} 
 

 
body { 
 
    margin:0; 
 
    color: #FFF; 
 
} 
 

 
.board { 
 
    letter-spacing: 1px; 
 
} 
 

 
.board-nav-indicator { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:75px; 
 
    height:75px; 
 
    /*background-color:red;*/ 
 
    background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: linear-gradient(bottom right, #FF512F, #DD2476); 
 
    transition:all 0.3s; 
 
    transform:translateX(0); 
 
    z-index:1; 
 
} 
 
[data-page='0'] .board-nav-indicator { 
 
    transform:translateX(0); 
 
} 
 
[data-page='1'] .board-nav-indicator { 
 
    transform:translateX(100%); 
 
} 
 
[data-page='2'] .board-nav-indicator { 
 
    transform:translateX(200%); 
 
} 
 

 
.board-nav-buttons { 
 
    display: flex; 
 
    align-items: center; 
 
    position:relative; 
 
    z-index:2; 
 
} 
 

 
.board-pages { 
 
    position:absolute; 
 
    top:75px; 
 
    left:0; 
 
    width:100%; 
 
    height:calc(100% - 75px); 
 
    overflow:hidden; 
 
} 
 
.board-page { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    transition:all 0.4s; 
 
    transform:translateX(0); 
 
    overflow:auto; 
 
    background-color: #262931; 
 
} 
 

 
.grid-row-theme .grid-item-theme { 
 
    max-width: 130px; 
 
} 
 

 
#align-left { 
 
    float: left; 
 
    color: #747474; 
 
} 
 

 
#align-right { 
 
    float: right; 
 
    color: #9CC8E3; 
 
} 
 

 
.grid-item { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-item-theme { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-row { 
 
    overflow-x:auto; 
 
    white-space:nowrap; 
 
} 
 

 
.grid-row .grid-item { 
 
    display:inline-block; 
 
    max-width:110px; 
 
} 
 

 
.grid-item-content { 
 
    text-align:left; 
 
    font-family: "mr-eaves-modern"; 
 
    font-size:0.3rem; 
 
    text-transform:uppercase; 
 
} 
 

 

 
.pick-palette img{ 
 
    border: 3px solid #FFF; 
 
} 
 

 
#dropdown-menu { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    margin: 2% 0 6% 0; 
 
    font-size: 0.9rem; 
 
    letter-spacing: 1px; 
 
}

<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 href="assets/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
</head> 
 
<body> 
 

 
<div class="board-pages"> 
 

 
     <div class="board-page"> 
 

 
     <div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div> 
 

 
     <div class="trending-above-palette"> 
 
      <div class="grid-item-theme" id="align-left">Trending</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div> 
 

 
     <div class="grid-row"> 
 
      <div class="grid-item grid-beige"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
       Beige 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-camel"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Camel 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-salmon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Salmon Pink 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-navajo"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Navajo White 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-niagara"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Niagara 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-primrose"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Primrose 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lapis"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lapis Blue 
 
      </div> 
 
      </div> 
 

 

 
     </div> 
 
     
 

 
     <div class="after-first-palette"> 
 
      <div class="grid-item-theme" id="align-left">Newly added</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div> 
 

 

 
     <div class="grid-row"> 
 
      <div class="grid-item grid-pale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Pale Blue 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-moss"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Moss Green 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-melon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Melon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-chiffon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Chiffon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-island"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Island 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-dogwood"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Dogwood 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-greenery"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Greenery 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     
 

 
     <div class="after-first-palette"> 
 
      <div class="grid-item-theme" id="align-left">All Warm Colors</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div>  
 
     <div class="grid-row"> 
 

 
      <div class="grid-item grid-ivory"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Ivory 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-honeydew"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Honeydew 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lavender"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lavender 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-canary"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Canary 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-hazelnut"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Hazelnut 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-kale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Kale 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-sharkskin"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content sharkskin"> 
 
       Sharkskin 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://use.typekit.net/hoc0zbs.js"></script> 
 
    <script>try{Typekit.load({ async: true });}catch(e){}</script> 
 

 
    <script> 
 

 
    $(".board-pages .grid-item").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 

 
    $(".board-pages .grid-item-pattern-board").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 
    
 

 
    </script>

來源

2017-04-26 Jin Ho Bryan Lee

考慮簡化您的代碼示例。也許只有一個問題存在的項目。我不認爲你需要發佈整個佈局。 –

我認爲它可以幫助：

CSS

.grid-item-content { 
    height: 26px; 
    line-height: 26px; 
    position: relative; 
} 
.grid-item-content i { 
    position: absolute; 
    right: 0; 
    top: 0; 
}

* { 
 
    box-sizing:border-box; 
 
} 
 

 
body { 
 
    margin:0; 
 
    color: #FFF; 
 
} 
 

 
.board { 
 
    letter-spacing: 1px; 
 
} 
 

 
.board-nav-indicator { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:75px; 
 
    height:75px; 
 
    /*background-color:red;*/ 
 
    background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: linear-gradient(bottom right, #FF512F, #DD2476); 
 
    transition:all 0.3s; 
 
    transform:translateX(0); 
 
    z-index:1; 
 
} 
 
[data-page='0'] .board-nav-indicator { 
 
    transform:translateX(0); 
 
} 
 
[data-page='1'] .board-nav-indicator { 
 
    transform:translateX(100%); 
 
} 
 
[data-page='2'] .board-nav-indicator { 
 
    transform:translateX(200%); 
 
} 
 

 
.board-nav-buttons { 
 
    display: flex; 
 
    align-items: center; 
 
    position:relative; 
 
    z-index:2; 
 
} 
 

 
.board-pages { 
 
    position:absolute; 
 
    top:75px; 
 
    left:0; 
 
    width:100%; 
 
    height:calc(100% - 75px); 
 
    overflow:hidden; 
 
} 
 
.board-page { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    transition:all 0.4s; 
 
    transform:translateX(0); 
 
    overflow:auto; 
 
    background-color: #262931; 
 
} 
 

 
.grid-row-theme .grid-item-theme { 
 
    max-width: 130px; 
 
} 
 

 
#align-left { 
 
    float: left; 
 
    color: #747474; 
 
} 
 

 
#align-right { 
 
    float: right; 
 
    color: #9CC8E3; 
 
} 
 

 
.grid-item { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-item-theme { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-row { 
 
    overflow-x:auto; 
 
    white-space:nowrap; 
 
} 
 

 
.grid-row .grid-item { 
 
    display:inline-block; 
 
    max-width:110px; 
 
} 
 

 
.grid-item-content { 
 
    text-align:left; 
 
    font-family: "mr-eaves-modern"; 
 
    font-size:0.3rem; 
 
    text-transform:uppercase; 
 
} 
 

 

 
.pick-palette img{ 
 
    border: 3px solid #FFF; 
 
} 
 

 
#dropdown-menu { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    margin: 2% 0 6% 0; 
 
    font-size: 0.9rem; 
 
    letter-spacing: 1px; 
 
} 
 

 
.grid-item-content { 
 
    height: 26px; 
 
    line-height: 26px; 
 
    position: relative; 
 
} 
 
.grid-item-content i { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<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 href="assets/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
</head> 
 
<body> 
 

 
<div class="board-pages"> 
 

 
     <div class="board-page"> 
 

 
     <div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div> 
 

 
     <div class="trending-above-palette"> 
 
      <div class="grid-item-theme" id="align-left">Trending</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div> 
 

 
     <div class="grid-row"> 
 
      <div class="grid-item grid-beige"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
       Beige 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-camel"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Camel 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-salmon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Salmon Pink 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-navajo"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Navajo White 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-niagara"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Niagara 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-primrose"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Primrose 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lapis"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lapis Blue 
 
      </div> 
 
      </div> 
 

 

 
     </div> 
 
     
 

 
     <div class="after-first-palette"> 
 
      <div class="grid-item-theme" id="align-left">Newly added</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div> 
 

 

 
     <div class="grid-row"> 
 
      <div class="grid-item grid-pale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Pale Blue 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-moss"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Moss Green 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-melon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Melon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-chiffon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Chiffon 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-island"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Island 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-dogwood"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Dogwood 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-greenery"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Greenery 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     
 

 
     <div class="after-first-palette"> 
 
      <div class="grid-item-theme" id="align-left">All Warm Colors</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div>  
 
     <div class="grid-row"> 
 

 
      <div class="grid-item grid-ivory"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Ivory 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-honeydew"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Honeydew 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lavender"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lavender 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-canary"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Canary 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-hazelnut"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Hazelnut 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-kale"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Kale 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-sharkskin"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content sharkskin"> 
 
       Sharkskin 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://use.typekit.net/hoc0zbs.js"></script> 
 
    <script>try{Typekit.load({ async: true });}catch(e){}</script> 
 

 
    <script> 
 

 
    $(".board-pages .grid-item").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 

 
    $(".board-pages .grid-item-pattern-board").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 
    
 

 
    </script>

來源

2017-04-26 20:47:00 Leguest

圖標的字體大小是比文本大。所以你可以減少圖標的字體大小。此外，要將圖標放在右側，您可以將其設置爲絕對容器

這是我編輯的代碼嘗試它。希望它可以幫助

.grid-item-content { 
    text-align:left; 
    font-family: "mr-eaves-modern"; 
    font-size: 0.3rem; 
    text-transform:uppercase; 
    position: relative; 
} 
.grid-item-content > i { 
    font-size: 0.3rem; 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

來源

2017-04-26 20:45:53 blecaf

謝謝！它真的幫了大忙！ –

最簡單的方法，我認爲，將分配給框包裝屬性 - 「位置：相對」，並在它內部的刻度圖標：「位置：絕對」。以下修改或許應該工作（它會更容易，如果你可以讓你的代碼的小提琴，在這裏把一個鏈接）：

.grid-row .grid-item { 
    position: relative; 
} 

.grid-item-content i { 
    position: absolute; 
    top: 0; 
    right: 0; 
}

來源

2017-04-26 20:47:22 Picard

浴液權圖標設置需要完全相同字體大小對齊。

小心的圖像，如果塊是比它更小，圖像超出塊

.grid-item-content .more-icon{ 
    float: right; 
    font-size: FONT SIZE YOU NEED 
}

來源

2017-04-26 20:47:58 SpaceDogCS

我同意一些我見過的其他的答案，在包裝和position: absolute;使用position: relative;在圖標上。但是，你會遇到的一些情況是，文本將會進入圖標並重疊或闖入下一行。

我會做什麼，我這裏有，並添加text-overflow: ellipsis;有的padding-right到包裝以及因此它不會碰上圖標，而是早期停止，砍下當它太長..

* { 
 
    box-sizing:border-box; 
 
} 
 

 
body { 
 
    margin:0; 
 
    color: #FFF; 
 
    padding-bottom: 100px; 
 
} 
 

 
.board { 
 
    letter-spacing: 1px; 
 
} 
 

 
.board-nav-indicator { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:75px; 
 
    height:75px; 
 
    /*background-color:red;*/ 
 
    background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -moz-linear-gradient(left top, #FF512F, #DD2476); 
 
    background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476); 
 
    background-image: linear-gradient(bottom right, #FF512F, #DD2476); 
 
    transition:all 0.3s; 
 
    transform:translateX(0); 
 
    z-index:1; 
 
} 
 
[data-page='0'] .board-nav-indicator { 
 
    transform:translateX(0); 
 
} 
 
[data-page='1'] .board-nav-indicator { 
 
    transform:translateX(100%); 
 
} 
 
[data-page='2'] .board-nav-indicator { 
 
    transform:translateX(200%); 
 
} 
 

 
.board-nav-buttons { 
 
    display: flex; 
 
    align-items: center; 
 
    position:relative; 
 
    z-index:2; 
 
} 
 

 
.board-pages { 
 
    position:absolute; 
 
    top:75px; 
 
    left:0; 
 
    width:100%; 
 
    height:calc(100% - 75px); 
 
    overflow:hidden; 
 
} 
 
.board-page { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    transition:all 0.4s; 
 
    transform:translateX(0); 
 
    overflow:auto; 
 
    background-color: #262931; 
 
} 
 

 
.grid-row-theme .grid-item-theme { 
 
    max-width: 130px; 
 
} 
 

 
#align-left { 
 
    float: left; 
 
    color: #747474; 
 
} 
 

 
#align-right { 
 
    float: right; 
 
    color: #9CC8E3; 
 
} 
 

 
.grid-item { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-item-theme { 
 
    flex:0 1 25%; 
 
    padding:6px; 
 
} 
 

 
.grid-row { 
 
    overflow-x:auto; 
 
    white-space:nowrap; 
 
} 
 

 
.grid-row .grid-item { 
 
    display:inline-block; 
 
    max-width:110px; 
 
} 
 

 
.grid-item-content { 
 
    text-align:left; 
 
    font-family: "mr-eaves-modern"; 
 
    font-size:0.3rem; 
 
    text-transform:uppercase; 
 
    position: relative; 
 
    padding-right: 30px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 

 

 
.pick-palette img{ 
 
    border: 3px solid #FFF; 
 
} 
 

 
#dropdown-menu { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    margin: 2% 0 6% 0; 
 
    font-size: 0.9rem; 
 
    letter-spacing: 1px; 
 
} 
 

 
.material-icons { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    line-height: .45 !important; 
 
}

<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 href="assets/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
</head> 
 
<body> 
 

 
<div class="board-pages"> 
 

 
     <div class="board-page"> 
 

 
     <div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div> 
 

 
     <div class="trending-above-palette"> 
 
      <div class="grid-item-theme" id="align-left">Trending</div> 
 
      <div class="grid-item-theme" id="align-right">See all</div> 
 
      <div style="clear: both;"></div> 
 
     </div> 
 

 
     <div class="grid-row"> 
 
      <div class="grid-item grid-beige"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" /> 
 
      <div class="grid-item-content"> 
 
       Beige 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-camel"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Here is a really long name 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-salmon"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Salmon Pink 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-navajo"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Navajo White 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-niagara"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Niagara 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-primrose"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Primrose 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 
      <div class="grid-item grid-lapis"> 
 
      <img src="http://placehold.it/100x100" alt="" class="grid-item-img" />  
 
      <div class="grid-item-content"> 
 
       Lapis Blue 
 
       <i class="material-icons more-icon">more_horiz</i> 
 
      </div> 
 
      </div> 
 

 

 
     </div> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     </div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://use.typekit.net/hoc0zbs.js"></script> 
 
    <script>try{Typekit.load({ async: true });}catch(e){}</script> 
 

 
    <script> 
 

 
    $(".board-pages .grid-item").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 

 
    $(".board-pages .grid-item-pattern-board").on("click",function(){ 
 
     $(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette"); 
 
    $(this).addClass("pick-palette"); 
 
    }); 
 
    
 

 
    </script>

來源

2017-04-26 20:49:29

如何對齊文本旁邊的圖標？

回答

相關問題