グリフコンdivを上に移動

グリフコンを入力フィールドの中央に置くことができない問題があります。ここに私のコードは次のとおりです。矢印が示すように、私は少しだけ高い画像を移動したいグリフコン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

グリフコンdivを上に移動

答えて

関連する問題