グリフコンが同じストリップの残りの要素と整列していないのはなぜですか？

は

私は別にglyphiconsから2 questions-グリフコンが同じストリップの残りの要素と整列していないのはなぜですか？

を持って、どのように私は、HTML/CSSに小さなアイコンを追加することができますか？ブートストラップなしでは不可能ですか？
私の家のグリフコンが他の要素と同じように真ん中に垂直に配置されていないのはなぜですか？

ありがとうございます！

ここ

<html> 
    <head> 
     <title>Tutorial</title> 
     <link rel="stylesheet" href="w3.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

     <div class="course_strip"> 
      <div class="course_strip_left"> 
       <p class="glyphicon glyphicon-home"></p> 
       <p>HTML</p> 
       <p>CSS</p> 
       <p>JAVASCRIPT</p> 
       <p>SQL</p> 
       <p>PHP</p> 
       <p>BOOTSTRAP</p> 
       <p>JQUERY</p> 
       <p>ANGULAR</p> 
       <p>MORE</p> 
      <div class="course_strip_right"> 
       <p>REFERENCES</p> 
       <p>EXAMPLES</p> 
      </div> 
     </div> 
    </body> 
</html>

コード - 私のHTMLはここCSS-

*{ 
    margin:0; 
    padding: 0; 
    box-sizing: border-box; 
    text-decoration: none; 
} 

.course_strip{ 
    background-color: rgba(0,0,0,0.65); 
    height: 44px; 
    color:#F1F1F1; 
    line-height: 44px; 
    vertical-align: middle; 
    text-transform: uppercase; 
    font-size: 20px; 
    letter-spacing: 1px; 
    font-family: 'Segoe UI'; 
} 
.course_strip p{ 
    padding: 0 10px; 
} 
.course_strip p:hover{ 
    background-color: #000; 
} 
.course_strip p:active{ 
    background-color: green; 
} 
.course_strip_left p{ 
    float: left; 
} 
.course_strip_right p{ 
    float: right; 
}

出典

2017-08-19 Raj Malhotra

警告の言葉： 'ボックスのサイズ変更置く：ボーダー・ボックス、将来的には、' * 'セレクタ_may原因予期せぬproblems_に'。 –

こんにちはRaj - 下の回答の1つがあなたのための「答え」だったら、それを受け入れるのは素晴らしいことです！私はあなたの口座で、あなたが何らかの回答を受け入れていないことに気づきました - あなたは答えを受け入れると評判を得ることを知っていましたか？そして答えた人も同様です。過去のすべての質問を通過し、最も役立った答えを受け入れることは、あなたにとって素晴らしいことかもしれません。（回答の左側にある数字の下にある大きいグレーのチェックマークをクリックすることで受け入れることができます）。 –

@cale_b申し訳ありませんが、私はこの機能について知りませんでした。 –

回答：

Glyphicons加えて、あなたは、このようなFontAwesomeとして、同様に他のフォントベースのアイコンライブラリを使用するか、画像を使用して、あなたのマークアップにそれらを埋め込むことができます。素晴らしいフォントないは、ブートストラップとして全体の枠組みが必要で（そして実際に、neither does Glyphicons）は
あなたのアイコンが付いた高さの問題は、あなたのglyphicon上の行の高さによるものであるが、残りの要素と同じではありませんん。ブラウザのインスペクタを使用すると、ストリップ内のすべてに44pxの線高を割り当てますが、グリフコンの線高は1emです。

ストリップ内のグリフコンを指定するスタイルを追加すると、そのグリフが機能することがわかります。（改訂コードの下を参照）。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    text-decoration: none; 
 
} 
 

 
.course_strip { 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
    height: 44px; 
 
    color: #F1F1F1; 
 
    line-height: 44px; 
 
    vertical-align: middle; 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
    letter-spacing: 1px; 
 
    font-family: 'Segoe UI'; 
 
} 
 

 
.course_strip p { 
 
    padding: 0 10px; 
 
} 
 

 
.course_strip p:hover { 
 
    background-color: #000; 
 
} 
 

 
.course_strip p:active { 
 
    background-color: green; 
 
} 
 

 
.course_strip_left p { 
 
    float: left; 
 
} 
 

 
.course_strip_right p { 
 
    float: right; 
 
} 
 

 
/* Adjust line-height to your desired position */ 
 
.course_strip .glyphicon { 
 
    line-height: 34px; 
 
}

<html> 
 

 
<head> 
 
    <title>Tutorial</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="course_strip"> 
 
    <div class="course_strip_left"> 
 
     <p class="glyphicon glyphicon-home"></p> 
 
     <p>HTML</p> 
 
     <p>CSS</p> 
 
     <p>JAVASCRIPT</p> 
 
     <p>SQL</p> 
 
     <p>PHP</p> 
 
     <p>BOOTSTRAP</p> 
 
     <p>JQUERY</p> 
 
     <p>ANGULAR</p> 
 
     <p>MORE</p> 
 
     <div class="course_strip_right"> 
 
     <p>REFERENCES</p> 
 
     <p>EXAMPLES</p> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-08-19 19:27:11

ええ、それを得ました。おかげで@cale_b –

.course_stripは44pxの行の高さを持っています。同じアイコンをアイコンに設定します。

.course_strip .course_strip_left p .glyphicon {line-height: 44px;}

出典

2017-08-19 19:17:04

スパンを削除してpタグに配置しましたが、まだそれは整列していません。 –

私の悪いです。見つけた。それはあなたが与えている行の高さです。アイコン上に同じ行の高さを与えます。 @RajMalhotra –

今すぐ具体的に：D –

このCSSを追加できます。両方のご質問

.course_strip >.course_strip_left > p > .glyphicon{ 
    float: right; 
    padding: 10 10px; 
}

出典

2017-08-19 19:20:51

グリフコンが同じストリップの残りの要素と整列していないのはなぜですか？

答えて

関連する問題