gpt4 book ai didi

html - 文本对齐不正确

转载 作者:行者123 更新时间:2023-11-28 05:38:55 24 4
gpt4 key购买 nike

我尝试为带有品牌( Logo 和品牌名称)的网站开发一个模型标题。我正在使用 Angular.js 进行网页开发。 Logo 是在线提供的图像的 URL。我无法继续进行网页开发,因为我遇到了这个对齐问题。请为此提出修复建议。

标题的屏幕截图。 enter image description here

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

最佳答案

首先修改你的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>

希望这能解决您的问题。

关于html - 文本对齐不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38026032/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com