Question

有没有什么方法可以将浏览器窗口中的圣杯布局居中？HORIZONTALLY？但保持列的垂直弯曲？

这是我的CSS

@charset "utf-8";
/* CSS Document */

body,td,th {
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

.HolyGrail,
.HolyGrail-body {
    display: flex;
  flex-direction: column;
 background: #DF191C
}

.HolyGrail-nav {
  order: -1;background: #2E3D6E
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;background: #2C9F23
  }
  .HolyGrail-content {
    flex: 1;
      background: #D440CA
  }
  .HolyGrail-nav, .HolyGrail-ads {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
      background: #A2A115
  }
}

和我的HTML

<body class="HolyGrail">
  <header>HEADER</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">CONTENT</main>
    </main>
    <nav class="HolyGrail-nav">NAVIGATION</nav>
    <aside class="HolyGrail-ads">ASIDE</aside>
  </div>
  <footer>Footer</footer>

小提琴 https://jsfiddle.net/z1ne9aah/

非常有责任

Answer 1

我希望我不会误解你的意思而抱歉我的英语不好，只需将text-align:center添加到你的body css中。

Answer 2

所以我得到了我的Header，两个列，页脚flexbox掏出

CSS

/*color and size*/

.parent {
    #border: 5px solid red;
    width: 1020px;
    margin:0 auto;
}


.header {
    #border: 5px solid purple;
    #height: 150px;
    #width: 1000px;
}
.two_column {
    #border: 5px solid green;
    #width: 1000px;
    #height: 700px;
}

.footer {
    #border: 5px solid orange;
    #height: 150px;
    #width: 1000px; 
}

.nav{
    #border: 5px solid yellow;
    width: 200px;

}

.content{
    #border: 5px solid black;
    width: 900px;

}

/* positioning*/

.parent{
    display: flex;
    flex-direction:column;
    #align-items: center;
}

.two_column{
    display: flex;
    justify-content: flex-start;            
}

.content{
    display: flex;
    width 750px;
    height: 1000px;

}

CSS圣杯如何集中在页面上

2 个答案: