Question

我尝试为品牌（徽标和品牌名称）的网站开发模拟标题。我正在使用Angular.js进行网页开发。徽标是在线提供的图像的URL。我无法继续进行网页开发，因为我遇到了这种对齐问题。请为此提出建议。

标题的屏幕截图。

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;
}

JS文件

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.";
}
])

Answer 1

首先在你的CSS中进行更改

.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>

希望这能解决您的问题。

Answer 2

删除自定义CSS（<link rel="stylesheet" href="./main.css"></link>）并运行。仅使用Bootstrap css。查看此演示：http://codepen.io/ihemant360/pen/aZpVKN

文字对齐不合适

2 个答案: