我在页面底部有菜单，我正试图将包装中心div
文档中包含徽标和按钮。 centering不起作用。你们能告诉我为什么吗？
我希望徽标向左浮动，按钮向右浮动，但包装div必须居中。
以下是代码：
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
<a href="" id="home">Home</a>
<a href="" id="menu2" style="background-color:honeydew">Menu 2</a>
<a href="" id="menu3" style="background-color:lightblue">Menu 3</a>
<a href="" id="menu4" style="background-color:red">Menu 4</a>
<a href="" id="menu5" style="background-color:yellow">Menu 5</a>
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
答案 0 :(得分：1)
要使块级元素水平居中，最简单的方法是应用#include <iostream>
#include <cmath>
#include <climits>
#include <algorithm>
#include <vector>
using namespace std;
int n;
vector<int> a;
int hi,lo,mid,e;
long long ans,foo,bar;
long long scost(vector<int>::iterator up) {
long long s = 0;
vector<int>::iterator beg = a.begin();
while(beg != up) {
s += mid;
beg++;
}
return s;
}
long long ecost(vector<int>::iterator up) {
long long s = 0;
while(up != a.end()) {
s += (mid + (mid - *up) * (mid - *up));
up++;
}
return s;
}
int main() {
ios_base::sync_with_stdio(false);
cin.tie(0);
lo = INT_MAX;
cin >> n;
for (int i = 0; i < n; ++i) {
cin >> e;
a.push_back(e);
}
sort(a.begin(),a.end());
lo = a[0], hi = a[n-1];
ans = LLONG_MAX;
while(lo <= hi) {
mid = (hi+lo)/2;
auto up = upper_bound(a.begin(),a.end(),mid);
foo = scost(up),bar = ecost(up);
ans = min(ans,foo+bar);
if(foo == bar) {
break;
} else if(foo < bar) {
lo = mid + 1;
} else {
hi = mid - 1;
}
}
cout << ans << "\n";
return 0;
}
并将width和margin-left设置为margin-right（或auto或margin: auto;）。
由于您已在margin: 0 auto;上设置了宽度，因此只需将.navigation应用于margin: auto，它就会水平居中。
.navigationhtml,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin: auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
答案 1 :(得分：1)
默认情况下，html元素左对齐。 （比如你的.navigation）
如果在块元素上添加margin:auto（注意：包装器div是块元素），它会将剩余空间与视口相加，并向块添加left-margin和right-margin元素，所以它看起来居中。
因此，为包装器div提供margin:auto样式将完成这项工作。
就像这样：
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin:0 auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
<a href="" id="home">Home</a>
<a href="" id="menu2" style="background-color:honeydew">Menu 2</a>
<a href="" id="menu3" style="background-color:lightblue">Menu 3</a>
<a href="" id="menu4" style="background-color:red">Menu 4</a>
<a href="" id="menu5" style="background-color:yellow">Menu 5</a>
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>