ロゴとロゴが横並びではなく積み重なっています

私のウェブサイトには、ロゴイメージと会社名があります。現在積み重ねられているので、ロゴ画像で、その下に会社名があります。ロゴとロゴが横並びではなく積み重なっています

私が望むのは、それらが並んでいることです。だから、左側はロゴイメージ、右側は会社名です。

私は間違っていますか？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
\t <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
\t \t <header> 
 
\t \t \t <nav class="navbar navbar-default navbar-fixed-top" style="background-color: #CFE4F1"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t  <!-- Brand and toggle get grouped for better mobile display --> 
 
\t \t \t  <div class="navbar-header"> 
 
\t \t \t  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
\t \t \t   <span class="sr-only">Toggle navigation</span> 
 
\t \t \t   <span class="icon-bar"></span> 
 
\t \t \t   <span class="icon-bar"></span> 
 
\t \t \t   <span class="icon-bar"></span> 
 
\t \t \t  </button> 
 
\t \t \t  <a class="navbar-brand" href="#home" style="color:"><img src="https://pbs.twimg.com/profile_images/698660793265446912/cAMrktol.png" alt="A Super Maid Logo"> COMPANY NAME</a> 
 
\t \t \t  </div>

出典

2016-12-13 raimond

あなたはこれを実現するためにいくつかのCSSを必要としています。

私はあなたのサイトブランディング用のリンクの中に既にイメージがあるので、スパンであなたのサイト名をラップしました。

.navbar-brand img, .navbar-brand span { 
    display: inline-block; 
    vertical-align: middle; 
}

あなたは、上、下、ベースラインにロゴを揃える簡単にこの方法をすることができます使用など

フィドル：https://jsfiddle.net/karolbrennan/qjuqgke1/

別の方法は、左にロゴをフロートするだけです：

.navbar-brand img { 
    float: left; 
} 
.navbar-brand { 
    clear: both; 
}

フロートに問題がないようにリンクをクリアしました。

フィドル：https://jsfiddle.net/karolbrennan/pny02qcm/1/

出典

2016-12-13 01:01:36

それはあなたのフィドルに動作しますが、それは私のウェブサイト上では動作しません。 – raimond

私にリンクを送ってもらえますか？ CSSをオーバーライドしているかもしれません。 –

ロゴとロゴが横並びではなく積み重なっています

答えて

関連する問題