哪個HTML5元素爲居中視口

Question

我想盡可能多地使用html分組元素的語義。

我正在用一個視口的正確元素名稱掙扎，該視口將整個頁面居中在屏幕中間（僅水平）。

我目前的解決辦法是這樣的：

<section id="viewport"> 
    <header> 
     <nav> 
      <ul> 
       <li id="home"><a href="#home">Home</a></li> 
       <li id="about"><a href="#about">About me</a></li> 
       <li id="contact"><a href="#contact">Contact</a></li> 
      </ul> 
     </nav> 
    </header> 
    <main data-ng-controller="shell as vm"> 
     <img alt="logo" src="/content/images/midbody.png" /> 
     <aside data-ng-show="vm.isBusy" class="page-splash dissolve-animation"> 
      <div data-cc-spinner="vm.spinnerOptions"></div> 
     </aside> 
     <article data-ng-view class="contentpage"></article> 
    </main> 
    <footer> 
     <div id="footer">Webdesign by Patrick Peters</div> 
    </footer> 
</section> 

Answer 1

HTML元素是關於語義。雖然footer，header或aside意味着在某種程度上是header是在開始footer末和aside別的地方，他們的主要目的不是要告訴他們的佈局是怎樣的，但描述重要性和他們是什麼。

因爲centered只是一個視覺信息，因此等效爲centered元素。視覺表現屬於css。

因此，如果section適合使用部分。你有一個header和一個footer所以它是一個section不知何故，但因爲它是由body代表的整個頁面，沒有真正的需要將其包裝到section（它不會使結構更清晰）。如果它沒有語義含義，你可以用div作爲匿名容器。

whatwg: section

的部分元素表示一個文檔或應用程序的通用部分。在這種情況下，部分是內容的主題分組，通常帶有標題。

部分的示例可以是章節，選項卡式對話框中的各種選項卡式頁面或論文的編號部分。一個網站的主頁可以分成幾部分介紹，新聞項目和聯繫信息。

注意：節元素不是通用的容器元素。當僅僅爲了樣式或爲了方便腳本而需要元素時，鼓勵作者改爲使用div元素。 一般規則是，只有元素的內容將在文檔的綱要中明確列出時，節元素纔是合適的。

whatwg: body

主體元素表示文件的主要內容。