HTML中的組件對齊不遵循I對齊的順序

項目文件的目的是使用@keyframe練習CSS動畫，並在Angular2中顯示一些不同的組件;我已經開始同時學習CSS和Angular2。HTML中的組件對齊不遵循I對齊的順序

問題是，在<app-root>模板中設置的標記順序在Web瀏覽器中加載時不適用。 <contents>模板必須位於中間，但它出現在<bottomline>的下方。

<body>index.html的標籤只有<app-root>，瀑布背景圖像也在這個文件中處理。

這是<app-root>的廟宇。

<titlebar></titlebar> 
<contents></contents> 
<bottomline></bottomline>

所以<contents>應該是在中間，但結果如下：

<titlebar>和<bottomline>具有相同的結構;唯一的兩個區別是<div>標籤中的文本和類選擇器的名稱。

<div class="titlebar"> 
    titlebar! 
</div>

這是titlebar.component.css。

div.titlebar{ 
    width: 100%; 
    height: 50px; 
    margin: 0 0 0 0; 
    background: rgba(0, 0, 0, 0.55); 
    color: #fff; 
}

body.component.html，其中選擇器名稱在.ts設置爲<contents>：

<div class="outer"> 
    <div class="middle"> 
     <div class="inner"> 

     </div> 
    </div> 
</div>

這一個是body.component.css。我將.outer,.middle和.inner選擇器從本網站中的問題複製到<div>標記的中心。我不認爲動畫會造成問題;當我將動畫代碼設置爲評論時，這種想法並沒有變得更好。

.outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%;} 

.middle { 
    display: table-cell; 
    vertical-align: middle;} 

.inner { 
    animation-duration: 3s; 
    animation-name: mainbox; 
    animation-iteration-count: 1; 

    margin-left: auto; 
    margin-right: auto; 
    width: 80%; 
    height: 80%; 
    background: rgba(0, 0, 0, 0.55); 
} 

@keyframes mainbox{ 
    from{ 
     background: rgba(0, 0, 0, 0); 
     height: 0%; 
    } 

    to{ 
     background: rgba(0, 0, 0, 0.55); 
     height: 80%; 
    } 
}

在我的常識，我們沒有理由爲<contents>和<bottomline>標籤切換自己的位置..我在想什麼？

來源

2017-03-09 Yeongchan Jeon

，因爲可能是position: absolute - 來測試，改變位置relative或inherent或東西 - 這將是發生的原因是因爲當你做的東西絕對的 - 你基本上帶離它的自然流動。把它看作是不僅僅把它放在上面，而且讓它放在上面 - 讓其他東西填充它後面的空間，這就是爲什麼你期望在它下面的一個元素 - 已經向上移動了。

來源

2017-03-09 02:57:58 HolyMoly

嗯只是通過刪除你提到的命令找回正確的;現在我必須處理一些邊距和高度問題..謝謝！ –

沒問題，開心編碼:) – HolyMoly

HTML中的組件對齊不遵循I對齊的順序

回答

相關問題