定心已經左浮動設置

這樣的IM感覺非常愚蠢的，我能不知道這一點，但我的問題是下面一個div：定心已經左浮動設置

我有一個頁腳和頁腳中我有2個的div，含有1一個Facebook圖片和一個包含版權文本的圖片。我想要做的是將它們彼此相鄰浮動，但將Facebook圖像對齊左側，文本對齊中心。

HTML：

<div id="footer"> 
    <div id="facebook"><img src="img/FB-f-Logo__blue_29.png" alt="facebook link"></div> 
    <div id="footerText"><p>© Copyright 2013. All Rights reserved.</p></div> 
</div>

的CSS：

#footer { 
    width: 960px; 
    height: 50px; 
    margin: 0 auto; 
} 

#facebook { 
    width: 29px; 
    height: 29px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    float: left; 
} 

#footerText { 
    float:left; 
    font-size: 11px; 
    text-align: center; 
    margin: 20px auto 20px auto; 
}

來源

2013-07-02 Torylon

我已經解釋，你要麼需要：1）中心都在頁腳中的圖像和文字，而浮動它們或2）兩個浮動到左側，但具有文本對齊中心。這兩種情況都需要完全不同的方法。你想要什麼？ – ProfileTwist

你可以給雙方的div一個額外的「包裝」頁腳中：http://jsfiddle.net/y9xpA/

#wrap {width: 400px; margin: auto;}

來源

2013-07-02 16:09:14

這是我檢查過的第一個答案，它經過一些調整後效果很好！我確定其他答案很好，但謝謝。 – Torylon

-1

#facebook: 
{ 
    display: inline-block; 
    text-align: center; 
} 
#footer-text 
{ 
    display: inline-block; 
    text-align: center; 
    vertical-align: center; 
}

來源

2013-07-02 16:11:02

CSS中沒有像'v-align'那樣的東西 – Rob

現在？是好的.. ?? –

你的文本#footerText將不會居中，因爲#footerText沒有指定的寬度。它的寬度目前是auto，這是默認的，所以它會縮小到文本里面的寬度; text-align:center或自動側邊距都不能解決這個問題，因爲我可以看到你已經嘗試過。

如果你想#facebook浮動一路到頁腳的左邊，你可以給頁腳的剩餘寬度#footerText：

#footerText { 
    float:left; 
    font-size: 11px; 
    text-align: center; 
    width: 931px; 
    margin: 20px 0; 
}

來源

2013-07-02 16:11:27 theftprevention

這將會是非常非常容易，只需給#footer一個text-align:center並將其中的其他元素設置爲display:inline。看看演示：http://jsfiddle.net/pUKwJ/

來源

2013-07-02 16:12:41

你可以嘗試使用絕對位置將Facebook div移出頁面流向左側，然後給頁腳文本留出一個等於facebook div寬度的左邊距並居中：

#footer { 
    width: 960px; 
    height: 50px; 
    position: relative; 
} 
#facebook { 
    width: 29px; 
    height: 29px; 
    position: absolute; 
    left: 0; 
} 
#footerText { 
    font-size: 11px; 
    text-align: center; 
    margin: 20px auto 20px 29px; 
}

Demo

來源

2013-07-02 16:24:15

這假設一個靜態（剛性）高度。情況並非總是如此;儘管頁腳通常是相同的高度。 – ProfileTwist

@ProfileTwist，OP明確指出頁腳的高度爲50px。 downvote是不合格的，因爲我的回答符合OP的規定要求。 –

我忽略了高度要求，現在我無法收回我的downvote，因爲它被鎖定。 – ProfileTwist

定心已經左浮動設置

回答

相關問題