响应问题：尝试使主导航链接居中

Question

我试图将所有主要导航链接放在所有屏幕尺寸上。我也使用了百分比和媒体查询，但出于某种原因，我很难将它们明确地集中在所有媒体屏幕尺寸上。

这是HTML：

<header>
<h1>TESTING</h1>
    <nav class="demo-nav">       
        <a href="index.html" class="active">Using jQuery</a>
        <a href="index2.html" >Using CSS</a>
    </nav>                
</header>




<nav class="main-nav">
<div class="container">
 <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Profile</a>
  <a href="#">Contact</a>
  </div>
</nav>


<div class="content">
<h2>Main Content Here!</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</div>

在我的CSS和媒体查询中，我有这个：

@media all and (min-width: 1024px) and (max-width: 1280px) { 
.container {
    margin:0 auto;
    width:40%;
}
}


@media all and (min-width: 768px) and (max-width: 1024px) {
.container {
    margin:0 auto;
    width:60%;

}
}

@media all and (min-width: 480px) and (max-width: 768px) { 
.container {
    margin:0 auto;
    width:55%;

}

}



@media all and (min-width: 360px) and (max-width: 480px) { 
header {
    padding:5px 0 55px
}

nav.main-nav a {
    font-size:17px
}

nav.main-nav {
    height:55px
}

.container {
    margin:0 auto;
    width:50%;

}

.content {
    -webkit-column-count:1;
/* Chrome, Safari, Opera */
    -moz-column-count:1;
/* Firefox */
    column-count:1
}
}




@media screen and (max-width: 480px) {
header {
    padding:5px 0 55px
}

nav.main-nav a {
    font-size:17px
}

nav.main-nav {
    height:55px
}

.container {
    width:92%
}

.content {
    -webkit-column-count:1;
/* Chrome, Safari, Opera */
    -moz-column-count:1;
/* Firefox */
    column-count:1
}
}

有关如何改进我的HTML或CSS以使其对所有尺寸有所回应的任何想法？

这是JSFIDDLE：https://jsfiddle.net/499zLng6/

提前致谢！

Answer 1

您需要建立链接a1并将容器display:inline-block;

由于您希望容器的宽度是动态的并且保持链接居中，只需给它text-align:center;并删除所有width:100%或margin's。

如果你想填写它，最好的方法是给你的链接填充，所以在这种情况下它将是padding's。

另外请记住提供您的链接.container li a{*CSS Here*}，因为当您填写它们时，您希望全部填充是可悬停且可点击的。

同样最好的方法是为你的链接提供一个像无序列表的容器。

https://jsfiddle.net/sfLy49kh/1/

display:block;

header {
  padding: 5px 0 55px 0px;
}
nav.main-nav a {
  font-size: 17px
}
nav.main-nav {
  height: 55px
}
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
}
.container li {
  display: inline-block;
}
.container li a {
  display: block;
}

Answer 2

尝试如下...... 也许帮助你...

nav.main-nav {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    text-align: center;/* added */
}

.container {
    margin:0 auto;
    width: auto;/* modified */
}

text-aling：center; 表示孩子将居中。

width：auto; 表示自身宽度为子宽度。

Answer 3

我建议您仅使用max-width创建媒体查询 - 从您希望产生某种效果的第二高分辨率开始，然后在该媒体查询下方使用具有不同的，低于value max-width。

我使用我的媒体查询：

@media all and (max-width: 1024px) { //tablets etc.
    //responsive css for tablets
}

@media all and (max-width: 768px) { //tab-phone devices.
    //responsive css for tab-phones
}

@media all and (max-width: 480px) { //2012 phones.
   //css for really small devices
}

遇到断点时，此处的CSS将覆盖样式。

这样做的原因是文件下方的样式会覆盖先前存在的样式。

这使得您可以首先应用平板电脑CSS而无需考虑手机，然后从平板电脑布局中添加移动特定部件。

关于以菜单项为中心的问题： @lee在评论中是对的。

您应该将容器设置为width: 100%并在链接上使用text-align: center。这样可以更好地工作，因为您不必一直“猜测”菜单的宽度（这不是一个好的做法），链接将自己对齐。

您可以摆脱媒体查询中的所有.container css，只需将.container的CSS设置为：

width: 100%
text-align: center`

Updated fiddle

Answer 4

这里过于复杂，只需在主导航中设置容器以显示为内联，并在父元素上使用文本对齐中心。请参阅代码段。

＆＃13;

＆＃13;

/***********************************************************************************************/
/* GENERAL */
/***********************************************************************************************/
body {
    font:16px/1.5 'Raleway',Arial,sans-serif;
    color:#fff;
    margin:0;
    padding:0
}

h1 {
    font-size:50px;
    font-weight:300;
    text-align:center;
    font-weight:700
}

span {
    color:#27ae60;
    font-weight:700
}

h2 {
    font-size:35px;
    text-align:left;
    margin-left:-20px
}

nav.demo-nav {
    width:350px;
    margin:0 auto;
    display:block
}

nav.demo-nav a {
    font-size:19px;
    display:inline-block;
    text-align:center;
    font-family:'Lato',sans-serif;
    color:#27ae60;
    font-weight:400;
    padding:5px 15px;
    text-transform:uppercase;
    border-radius:2px;
    letter-spacing:1px;
    text-decoration:none;
    margin-right:10px;
    border:2px solid #ecf0f1;
    border-radius:none
}

nav a.active,nav a:hover {
    background:#ecf0f1;
    color:#27ae60
}

/***********************************************************************************************/
/* HEADER AND NAV */
/***********************************************************************************************/
header {
    height:250px;
    background:#f1c40f;
    padding:23px 0
}

nav.main-nav,.content {
    position:relative
}

nav.main-nav {
    background:#fff;
    height:60px;
    border-bottom:1px solid #dadada;
    text-align: center;
}

nav.main-nav a {
    font-family:'Lato',sans-serif;
    font-size:20px;
    text-decoration:none;
    display:inline-block;
    padding:15px 19px;
    color:#27ae60
}

nav.main-nav.stickytop {
    position:fixed;
    top:0
}

.container {
    display: inline;
    /*
    margin:0 auto;
    width:31%
    */
}

/***********************************************************************************************/
/* CONTENT */
/***********************************************************************************************/
.content {
    color:#222;
    padding:50px;
    -webkit-column-count:3;
    /* Chrome, Safari, Opera */
    -moz-column-count:3;
    /* Firefox */
    column-count:3;
    -webkit-column-gap:40;
    column-gap:40px
}

.content h2 {
    margin:0
}

/***********************************************************************************************/
/* RESPONSIVE */
/***********************************************************************************************/





@media all and (max-width: 480px) {}

/*
@media all and (min-width: 1024px) and (max-width: 1280px) { 
.container {
margin:0 auto;
width:40%;
}
}


@media all and (min-width: 768px) and (max-width: 1024px) {
.container {
margin:0 auto;
width:60%;

}
}

@media all and (min-width: 480px) and (max-width: 768px) { 
.container {
margin:0 auto;
width:55%;

}

}

*/

@media all and (min-width: 360px) and (max-width: 480px) { 
    der {
        padding:5px 0 55px
    }
    
    nav.main-nav a {
        font-size:17px
    }
    
    nav.main-nav {
        height:55px
    }
    
    .container {
        margin:0 auto;
        width:50%;
        
    }
    
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1
    }
}




@media screen and (max-width: 480px) {
    header {
        padding:5px 0 55px
    }
    
    nav.main-nav a {
        font-size:17px
    }
    
    nav.main-nav {
        height:55px
    }
    
    .container {
        width:92%
    }
    
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1
    }
}

＆＃13;

<header>
    <h1>TESTING</h1>
    <nav class="demo-nav">       
        <a href="index.html" class="active">Using jQuery</a>
        <a href="index2.html" >Using CSS</a>
    </nav>                
</header>




<nav class="main-nav">
    <div class="container">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Profile</a>
        <a href="#">Contact</a>
    </div>
</nav>


<div class="content">
    <h2>Main Content Here!</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    
</div>

＆＃13;

＆＃13;

＆＃13;

一般来说，在不使用媒体查询的情况下开始使用移动视图然后使用媒体查询来调整更大的屏幕尺寸是有意义的。

https://jsfiddle.net/499zLng6/2/

希望有所帮助。