認沽格於母公司的底部，但不會絕對

HTML

<footer> 
    <!-- ... --> 
    <span class="copyright">abc</span> 
</footer>

CSS（SASS）

footer { 
    // ... 

    text-align: center; 

    > .copyright { 
     position: absolute; 
     bottom: 0; 
     display: inline-block; 
    }  

}

所以，簡單地拉著作權下來到父塊的底部並居中。使用position: absolute很容易，但是，使用子元素上的display: inline-block和父元素上的text-align: center的方式居中將不起作用。

是否有可能在保留版權的情況下放下版權相對？

來源

2016-02-22 notnull

要使用JavaScript/jQuery的？ –

我真的想用CSS的方式解決它，如果可能的話 – notnull

嘗試顯示：table-footer-group –

如果父級的高度已定義或可解析，則Flexbox可以這樣做。

Complete Codepen Demo

footer { 
 
    height: 150px; 
 
    width: 80%; 
 
    margin: auto; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    background: plum; 
 
} 
 
.copyright { 
 
    margin-top: auto; 
 
    /* push to bottom */ 
 
    background: red; 
 
    align-self: flex-start; 
 
    /* collapse to own width */ 
 
    margin-left: auto; 
 
    /* centering */ 
 
    margin-right: auto; 
 
}

<footer> 
 
    <header>I'm a header</header> 
 

 
    <span class="copyright">Copyright</span> 
 
</footer>

來源

2016-02-22 11:33:47

對簡單問題的不必要的複雜解決方案。只有真正的放置可以用絕對定位或Javascript完成。 – NotJustin

真的嗎？它確實*** ***什麼OP問... –

https://jsfiddle.net/wocfpcdu/如果我想添加兩個50％的列到頁腳？ – NotJustin

-1

雖然我同意Flexbox的都可以使用，它的瀏覽器支持不在IE（Caniuse）真棒。

我會用簡單的塊與文本居中。 JS Fiddle

這是簡單：

footer { 
    border: 1px solid #900; 
} 

footer > .copyright { 
    padding: 50px 0 10px; 
    text-align: center; 
}

如果你真的需要使用inline-block的，將它添加到CSS版權：

display: inline-block; 
width: 100%;

來源

2016-02-22 11:44:30 NotJustin

這不是*將元素放置在div底部......它只是在其上方添加額外的空間，將其他所有東西推開。 - https://jsfiddle.net/u0oL5a2k/1/ –

您的解決方案也不例外。它只是將所有元素更改爲等效於寬度100％並插入浮動。 IE你不能再有兩個項目彼此相鄰：https：// jsfiddle。net/1adb0aLL/ – NotJustin

如果有任何問題，會影響頁腳中可能包含的更多元素，並使解決方案過於複雜。 – NotJustin

認沽格於母公司的底部，但不會絕對

回答

相關問題