我无法弄清楚如何将我们的IMG集中在我们的导航栏上。道歉这是一个基本问题。
文本对齐不起作用,以下不起作用bc使img超出导航栏列表。任何人对最简单的修复都有任何想法?非常感谢!
display: block;
margin-left: auto;
margin-right: auto }
.logo img {
width: 34%;
max-width: 150px;
max-height: 150px;
height: 35%;
}
.nav-item--left {
float: left;
margin-right: 20px;
margin-top: 35px;
}
@media (min-width: 768px) {
.nav-item--left {
margin-right: 25px;
}
}
.nav-item--right:last-child {
margin-right: 0;
}
.nav-item--right {
display: block;
}
.nav-item--right {
float: right;
margin-right: 20px;
margin-top: 35px;
}
@media (min-width: 768px) {
.nav-item--right {
margin-right: 25px;
}
}
.nav-item--right:last-child {
margin-right: 0;
}
.nav-item--right {
display: block;
}
<div id="narrow-display-test" style="display:none"></div>
<header class="header container container--fluid container--darkBackground js-header">
<div class="container">
<a href="/" class="logo">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" alt="alt">
</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-itemText nav-itemText--link">
<div class="header" ng-controller="LoginCtrl">
<div class="clearfix">
<div class="welcome pull-right" ng-show="userLoaded">
<a class="nav-itemText nav-itemText--link" href="">
<span ng-show="currentUser">Your Site</span>
</a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-itemText nav-itemText--link">
<div class="header" ng-controller="LoginCtrl">
<div class="clearfix">
<div class="welcome pull-right" ng-show="userLoaded">
<a class="nav-itemText nav-itemText--link" href="/">
<span ng-show="currentUser">Your Site2 </span>
</a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-itemText nav-itemText--link">
<div class="header" ng-controller="LoginCtrl">
<div class="clearfix">
<div class="welcome pull-right" ng-show="userLoaded">
<a class="nav-itemText nav-itemText--link" href="/">
<span ng-hide="currentUser">
Your Site 3
</span>
</a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-itemText nav-itemText--link">
<div class="header" ng-controller="LoginCtrl">
<div class="clearfix">
<div class="welcome pull-right" ng-show="userLoaded">
<a class="nav-itemText nav-itemText--link" href="/">
<span ng-hide="currentUser">
Your Site 4
</span>
</a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-itemText nav-itemText--link">
<div class="header" ng-controller="LoginCtrl">
<div class="clearfix">
<div class="welcome pull-right" ng-show="userLoaded">
<a class="nav-itemText nav-itemText--link">
<ng-include src="'/partials/login.html'"></ng-include>
</a>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
答案 0 :(得分:0)
如果您不想在填充和边距中硬编码以使元素居中,则使用自动边距是常见的解决方案。
通常会出现使用float
属性未显示元素的问题。使用float将元素从DOM的正常流中取出。你需要清除元素的浮动,以便在浮动元素之后取正常位置。
这篇文章有助于解释有关花车的更多信息:
https://css-tricks.com/all-about-floats/
同样,这都是假设你的问题来自花车。
答案 1 :(得分:0)
你可以使用一个非常简单的技巧。
让您的图片成为导航栏的子项,然后将scala> sc
sc scala schema
设置为导航栏。
现在在您的图片中插入此代码。
position:relative;
图像将垂直和水平移动到导航栏的正中心。
但如果您只想将其水平居中,请移除img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
并将top: 50%;
更改为transform: translate(-50%, -50%);
像这样:
transform: translateX(-50%);
对于垂直广告,请移除img{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
并将left: 50%;
更改为transform: translate(-50%, -50%);
像这样:
transform: translateY(-50%);
答案 2 :(得分:0)
只需在图片链接上方添加div
类row text-center
,如下所示:
<div class="row text-center">
<a href="/" class="logo">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" alt="alt">
</a>
</div>