0
Ich habe versucht, eine Mock-up-Header für eine Website mit Branding (Logo und Markenname) zu entwickeln. Ich verwende Angular.js für die Webseitenentwicklung. Das Logo ist eine URL eines online verfügbaren Bildes. Ich bin nicht in der Lage, weiter mit der Webseitenentwicklung fortzufahren, da ich mit diesem Ausrichtungsproblem festhalte. Bitte schlagen Sie das Problem vor.Textausrichtung nicht korrekt
Der Screenshot der Kopfzeile. 
Der HTML-Code:
<!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>
Der CSS-Code
body{
top: 0px;
}
h1 {
margin-top: 0;
}
p {
font-size: 18px;
}
.logo{
height: 100px;
font-size: 80px;
padding: 0px;
top: 0px;
vertical-align:middle;
}
Die JS-Datei
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.";
}
])
Entfernen Sie benutzerdefinierte CSS und es wird funktionieren – ihemant360
Ja ohne Bootstrap CSS funktioniert es gut. Aber wie nutzen Sie CSS von Bootstrap zur Verfügung gestellt und beheben Sie das Problem auch. – Navaneeth
Verwenden Sie margin-top: 10px in der Logo-Klasse –