移動glyphicon div更高

我有一個問題，我無法獲得glypicon到其旁邊的輸入字段的中心。這裏是我的代碼：移動glyphicon div更高

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 

    <!-- Bootstrap Core CSS --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- jQuery --> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <style> 
     .mydiv { 
      font-size: 100px; 
     } 

     .glyphicon-search { 
      font-size: 30px; 
     } 
    </style> 
</head> 

<body> 
    <div class="mydiv"> 
     <input class="input" type='text' placeholder="ABC" autocomplete="off"><div class="glyphicon glyphicon-search"></div> 
    </div> 
</body> 

</html>

這裏是什麼樣子：

我想作爲箭頭指示移動圖像只是有點高。這怎麼可能？

來源

2017-04-24 user1985273

嘗試使glyphicon的''該行height' 100px' – nikamanish

您可以使用圖標上的vertical-align來影響該圖標。或父母上的display: flex; align-items: center垂直對齊所有內容。您還可以使用transform: translateY();

我在此處使用flex並將其他2個選項註釋掉。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- jQuery --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <style> 
 
    .mydiv { 
 
      font-size: 100px; 
 
     } 
 

 
     .glyphicon-search { 
 
      font-size: 30px; 
 
      /*vertical-align: middle; 
 
      transform: translateY(-10px);*/ 
 
     } 
 
    .mydiv { 
 
     display: flex; 
 
     align-items: center; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="mydiv"> 
 
    <input class="input" type='text' placeholder="ABC" autocomplete="off"> 
 
    <div class="glyphicon glyphicon-search"></div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-04-24 20:15:09

移動glyphicon div更高

回答

相關問題