テキストの配置が正しくない

私はブランド（ロゴとブランド名）を持つウェブサイトのヘッダーを作成しようとしました。 Angular.jsをウェブページ開発に使用しています。ロゴは、オンラインで入手可能な画像のURLです。私はこのアラインメントの問題に悩まされているので、Webページの開発を進めることはできません。これを修正してください。テキストの配置が正しくない

ヘッダーのスクリーンショット。

HTMLコード：

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="https://code.angularjs.org/1.5.5/angular.min.js"></script> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
     <script type="text/javascript" src="./script.js"></script> 
     <link rel="stylesheet" href="./main.css"></link> 
    </head> 
    <body ng-app="sampleApp">  
    <nav class="navbar navbar-default" ng-controller="headerCtrl as header"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <img class="navbar-brand logo" src={{header.logoURL}}></img> 
       <a class="navbar-brand logo" href="#">{{header.logoText}}</a> 
      </div>   
     </div> 
    </nav> 

    </body> 
</html>

CSSコード

body{ 
    top: 0px; 
} 
h1 { 
    margin-top: 0; 
} 
p { 
    font-size: 18px; 
} 

.logo{ 
    height: 100px; 
    font-size: 80px; 
    padding: 0px; 
    top: 0px; 
    vertical-align:middle; 
}

var app = angular.module('sampleApp', []); 

app.controller("headerCtrl", ['$scope', function($scope) { 
    console.log("Ctrl"); 
    this.logoURL = "http://sugartin.info/wp-content/uploads/2013/11/logo.png"; 
    this.logoText = "BrandName"; 
    this.slogan = " Roll out."; 
} 
])

出典

2016-06-25 Navaneeth

カスタムCSSを削除しても動作します – ihemant360

はいブートストラップなしで動作します。しかし、どのようにブートストラップによって提供されるCSSを利用し、問題を解決するのか。 – Navaneeth

使用マージントップ：ロゴクラスの10px –

は、まずあなたのCSSの変更を行うJSファイル

.logo{ 
    height: 100px; 
    font-size: 80px; 
    padding: 0px; 
    top: 0px; 
    line-height : 100px; 
} 
a.navbar-brand.logo.brandName{ 
     margin-left :0; 
}

その後、行に.brandNameクラスを追加します。

<a class="navbar-brand logo brandName" href="#">{{header.logoText}}</a>

これで問題が解決します。

出典

2016-06-25 07:52:38

カスタムCSS（<link rel="stylesheet" href="./main.css"></link>）を削除して実行してください。ブートストラップCSSのみを使用してください。このデモをチェックしてください：http://codepen.io/ihemant360/pen/aZpVKN

出典

2016-06-25 08:00:44 ihemant360

テキストの配置が正しくない

答えて

関連する問題