Question

我不确定如何让主容器（＆＃34; main＆＃34;）居中？ div框需要居中但是卡在左边。我希望在整个空间和主要部分之间保留一定的余量，但是我不希望将其限制在左边？

我还在学习CSS。我们非常感谢您对布局或我如何完成编码的任何反馈。非常感谢。

<!DOCTYPE html>
 <html>
   <head>
    <meta charset="utf-8">
    <title>Business Title</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
   <header>
    <img class="mainImage" src="image/logo.png">
   </header>
  </head>

<body>
<div class="main">
  <h1>Simple Business.</h1>

<ul>
  <li><a href="#1">I need Option 1.</a></li>
  <li><a href="#2">I just need Option 2.</a></li>
  <li><a href="#3">I just need Option 3.</a></li>
  <li><a href="#4">I need Option 4.</a></li>
</ul>

  <footer>
  <h1>About THIS BUSINESS.</h1>
  <p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat. 
  </p>
</footer>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>
----------

**CSS:**

/******************************************
/* SETUP                   
/*******************************************/

/* Box Model Hack */
* {
 -moz-box-sizing: border-box; /* Firexfox */
 -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
 box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clear {
  clear: both;
}

.alignright {
    float: right; 
    padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
    float: left; 
    padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES                   
/*******************************************/

body {
     color: #000;
     background-color: #ececec;
     font-size: 12px;
     line-height: 1.4;
     font-family: Helvetica, Arial, sans-serif;
     text-align: center;
}

h1 {
     font-family:'Arial Black';
     font-size: 4em;
     padding-top: 5px;
}

li {
     text-decoration: none;
     font-size: 2em;
     line-height: 2.5em;
     color: #FF48D0;
}

ul {
  list-style: none;
  padding: 0; 
}

.mainImage {
     width:75%;
     max-width:483px;
}

a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}

/******************************************
/* LAYOUT                   
/*******************************************/

.main {
     background-color: #FFF;
     margin:1em;
     margin-left: 2em;
     margin-right: 2em;
     float: center;
     max-width: 960px;

}

.about, p {
     float:center;
     max-width: 960px;
     padding-left: 1em;
     padding-right: 1em;
     text-align: justify;
 }

header {
 padding:10px;
}

footer {
 padding: 5px;
}

/******************************************
/* ADDITIONAL STYLES                   
/*******************************************/

/* =======================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 930px) {

 .main {
   max-width: 95%;
margin: 0 auto; 
   text-align:center;
   padding-bottom: 1.5em;
float: none;
 }

 h1 {
      font-size: 2.5em;
      text-align: center;
   }

 li {
      font-size: 2em;
      line-height: 2.5em;
 }
}


@media only screen and (max-width: 480px) {
  .main {
     max-width: 95%;
  }

  h1 {
     font-size: 2em;
     text-align: center;
  }

  li {
     font-size: 1.4em;
 line-height: 2em;
  }

}

Answer 1

您只需要为您的css添加margin: 0 auto;。

像这样：

.main {
    margin: 0 auto; 
}

这会将元素自动集中到用户浏览器。

CSS Margins

Answer 2

使用CSS将元素居中的经典方法是将左右边距设置为auto

您的代码应为

.main {
    background-color: #FFF;
    margin: 1em auto;
    max-width: 960px;
}

Answer 3

.main {
  background-color: #FFF;
  max-width: 960px;
  display: table;
  margin: 0 auto;
}

小提琴： Demo

如何将所有元素集中在一起？

3 个答案: