致力于让我的网站快速响应。在一定宽度之后，我希望我的一个div在它之前跌落到两个之下，div会变得居中。问题是现在他们所做的只是在断点后保持左对齐。在断点之后，我如何让它们再次居中在页面上？
@charset "utf-8";
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Site Wide CSS */
body {
max-width: 100%;
margin: 0;
font-size: 16px;
background-color: #fff;
color: #000;
font-family: 'Lato', sans-serif;
}
a {
text-decoration: none;
color: #555;
}
p {
text-align: center;
}
/* Nav Bar Styles */
nav {
text-align: right;
width: 100%;
background-color: #fff;
font-size: 1.4em;
padding: 0;
padding-top: .5%;
padding-bottom: .6%;
}
ul {
padding-right: 2%;
}
.navigation {
display: inline;
margin: .5%;
}
.logo {
color:#000;
display: inline;
float: left;
margin: 0 0 0 1%;
}
/* Footer */
footer {
text-align: center;
padding-top: 2%;
padding-bottom: .5%;
font-size: 79%;
color: #000;
background-color: #fff;
clear: left;
}
footer i.fa {
font-size: 3.5em;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
footer i.fa-facebook-square:hover {
color: #3b5998;
}
footer i.fa-instagram:hover {
color: #125688;
}
footer i.fa-flickr:hover {
color: #ff0084;
}
footer i.fa-twitter-square:hover {
color: #00aced;
}
/* Font Awesome */
i.fa {
font-size: 2.3em;
}
.container {
padding-top: 2.5%;
padding-bottom: 2.5%;
}
/* Banner */
div.background {
margin: 0;
width: 100%;
min-height: 650px;
background-image: url("../img/landscapes/br.jpg");
background-sizeP: cover;
background-repeat: no-repeat;
}
/* Skills */
div.container {
width: 100%;
min-height: 175px;
color: #000;
margin: 0;
text-align: center;
}
.skills {
float: left;
width: 33%;
margin-bottom: 1.8%;
}
.expertise {
text-align: center;
margin: 2% 2% 1% 2%;
font-size: 1.2em;
}
.details {
padding: 2%;
}
a.btn {
width: 11%;
margin: auto;
padding: .6%;
text-align: center;
border: 1px solid #fff;
font-size: 1.2em;
background-color: #000;
color: #fff;
border-radius: 9px;
}
.btn:hover {
background-color: #fff;
color: #000;
border: solid 1px #000;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
/* Media Queries */
@media only screen and (max-width: 1070px) {
.photo .design {
text-align: center;
margin: auto;
}
.web {
clear: left;
}
a.btn { clear: left;
}}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Brian Funderburke Photography & Design</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/sitewide.css">
<link rel="stylesheet" href="css/home.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav>
<h1 class="logo">B.Fun Photography & Design</h1>
<ul>
<li class="navigation"><a href="home.html">Home</a></li>
<li class="navigation"><a href="photography.html">Photography</a></li>
<li class="navigation"><a href="design.html">Design</a></li>
<li class="navigation"><a href="about.html">About</a></li>
<li class="navigation"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="background">
</div>
<div class="container photo">
<div class="skills">
<i class="fa fa-camera-retro"></i>
<h2 class="expertise">Photography</h2>
<p class="details">Let me capture your beautiful moments for you! I shoot everything from weddings to landscapes.</p>
</div>
<div class="skills design">
<i class="fa fa-paint-brush"></i>
<h2 class="expertise">Design</h2>
<p class="details">From logo design to business cards. Your products deserve to look beautiful.</p>
</div>
<div class="skills web">
<i class="fa fa-code"></i>
<h2 class="expertise">Web Development</h2>
<p class="details">Handcrafted websites help ensure you stand out in today's crowded online ecosystem!</p>
</div>
<a href="contact.html" class="btn">Get In Touch!</a>
</div>
<footer>
<i class="fa fa-instagram footerSocial"><a href="https://www.instagram.com/bfunphoto/"></a></i>
<i class="fa fa-flickr footerSocial"><a href="https://www.flickr.com/photos/bfunder94/"></a></i>
<i class="fa fa-facebook-square"><a href="https://www.facebook.com/BFunPhoto"></a></i>
<i class="fa fa-twitter-square"><a href="https://twitter.com/BFunPhoto"></a></i>
<p>© 2016 Brian Funderburke. All Rights Reserved.</p>
</footer>
</body>
</html>
有问题的CSS媒体查询：
@media only screen and (max-width: 1070px) {
.photo .design {
text-align: center;
margin: auto;
}
.web {
clear: left;
}
a.btn { clear: left;
}}
答案 0 :(得分：1)
你很接近，只需更改css以定位skills元素，向skills类添加100％的宽度，并将text-align:center添加为：
@media only screen and (max-width: 1070px) {
.skills {
width: 100%;
text-align: center;
margin: auto;
}
.web {
clear: left;
}
a.btn {
clear: left;
}
}
答案 1 :(得分：1)
@media only screen and (max-width: 1070px) {
.photo {
text-align: center;
}
.skills {
display: inline-block;
float: none;
}
}
并删除＆＃39;取得联系＆＃39;按钮（放在之前或之后）喜欢
<div class="container photo">
<div class="skills">
<i class="fa fa-camera-retro"></i>
<h2 class="expertise">Photography</h2>
<p class="details">Let me capture your beautiful moments for you! I shoot everything from weddings to landscapes.</p>
</div>
<div class="skills design">
<i class="fa fa-paint-brush"></i>
<h2 class="expertise">Design</h2>
<p class="details">From logo design to business cards. Your products deserve to look beautiful.</p>
</div>
<div class="skills web">
<i class="fa fa-code"></i>
<h2 class="expertise">Web Development</h2>
<p class="details">Handcrafted websites help ensure you stand out in today's crowded online ecosystem!</p>
</div>
</div>
<div style="text-align: center;">
<a href="contact.html" class="btn">Get In Touch!</a>
</div>
，所以它不会打破布局。 如果您将宽度设置为div（类技能），它将按预期工作！ 希望它有所帮助！
答案 2 :(得分：1)
如果我理解正确，您希望所有div都堆叠并居中，而视口是一个较小的屏幕。要使用您提供的代码实现此目的，请使div的宽度为100％。这是显示要添加内容的CSS。我再次希望这能回答这个问题。
@media only screen and (max-width: 1070px) {
.photo .design {
text-align: center;
margin: auto;
}
.web {
clear: left;
}
/*the part I added*/
.skills {
width: 100%;
}
a.btn { clear: left;
}}
答案 3 :(得分：-1)
样式表中的以下内容 div {align：center; } 但是，如果您使用的是内联样式 style =＆＃39; text-align：center＆＃39;