在媒體查詢斷點之后，如何使div居中？
[英]How would I get my divs to center after a media query breakpoint?
問題描述
正在努力使我的網站具有響應能力。 經過一定的寬度后，我希望我的一個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;
}}
4 個解決方案
解決方案1
1 2016-02-16 22:49:52
您已經接近了，只需更改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;
}
}
請參閱示例： https ： //jsfiddle.net/kh0prtc4/12/
解決方案2
1 2016-02-16 23:02:10
@media only screen and (max-width: 1070px) {
.photo {
text-align: center;
}
.skills {
display: inline-block;
float: none;
}
}
並刪除“取得聯系”按鈕（在此之前或之后）
<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開始，因此不會破壞布局。 而且，如果您將寬度設置為div（課堂技能），它將按預期工作！ 希望它有所幫助！
解決方案3
1 2016-02-16 23:17:07
如果我理解正確，那么您希望所有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;
}}
解決方案4
-1 2016-02-16 22:39:22
樣式表中的以下內容div {align：center; }但是，如果您使用的是內聯樣式，則為style ='text-align：center'
在我 SlideUp 另一個 div 后，如何阻止我的中心 div 更改 position？
[英]How can I stop my center div from changing position after I SlideUp another divs?
如果margin：auto不起作用，如何使div對准中心？
[英]How do I get my divs to align at the center if margin:auto doesn't work?
我怎樣才能讓我的表單有 2 個 div 始終居中在頁面上
[英]How can I get my form which has 2 divs to always center inline on the page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.