爲什麼不是這個集中？

我無法將其置於中心位置。我試過在所有地方添加對齊，以及每個不同的標籤組合。我知道HTML並不好，但我現在只是試圖獲得一些功能 - 而不是擔心最佳實踐。爲什麼不是這個集中？

<table class='navbar' width='100%'> 
    <tr> 
     <td class='navbar'> 
      <a href='#' class='cta cta-big cta-red'><center><span class='icon-go'>No</span></a></center> 
     </td> 
     <td class='navbar'> 
      <center><a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a></center> 
     </td> 
     <td class='navbar'> 
      <center><a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a> 
     </td> 
    </tr> 
</table>

任何幫助，將不勝感激！謝謝！

來源

2011-08-19 Kris

試試這個css。

.center { 
    float: none; 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
}

margin: 0 auto;做到了居中的訣竅。順便說一句，提到寬度屬性也會確保右邊和左邊的邊距取決於窗口大小。

來源

2011-08-19 04:06:46 Mahesh

對不起 - 我該如何使用？我把它放到我的css文件中，但我應該在哪裏引用它？ – Kris

@Kris您可以將'.center'更改爲'.navbar'，這樣一旦將代碼放入css文件中，更改就會自動完成。 –

如果沒有寬度，'margin：0 auto'是否有效？ – sdleihssirhc

在第一<td>，你有你的HTML舉辦像這樣：

<a><center><span></span></a></center>

您要關閉標籤在錯誤的順序;與其他兩條線，它看起來像你的意思做：

<center><a><span></span></a></center>

在第三<td>，你沒有關閉<center>可言。

Here's a fiddle隨着這些變化，它看起來像它的作品。

來源

2011-08-19 04:09:32 sdleihssirhc

擺脫<center>標籤：

<table class='navbar' width='100%'> 
    <tr> 
     <td class='navbar'> 
      <a href='#' class='cta cta-big cta-red'><span class='icon-go'>No</span></a> 
     </td> 
     <td class='navbar'> 
      <a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a> 
     </td> 
     <td class='navbar'> 
      <a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a> 
     </td> 
    </tr> 
</table>

並使用CSS做定心：

table { 
    text-align:center; 
}

演示：http://jsfiddle.net/w7rWx/

「不擔心最佳做法」往往是一個困難的方式來「獲得功能」，特別是跨瀏覽器。至少做出努力是符合你的最佳利益的，考慮對HTML/CSS採取不同的方法。

來源

2011-08-19 04:09:56

+1「很明顯我沒有看到它」 – sdleihssirhc

+1表示「擺脫'

'標籤」。那些太過時了！ – Nathan

'已被[棄用]（http://www.w3.org/wiki/HTML/Elements/center）很長一段時間，並有很好的理由 - 但瀏覽器仍然會遵守其行爲（現在最小）。我懷疑這裏的桌面佈局也不是必需的。克里斯，如果你解釋你想要的樣子的要求，我會很樂意以一種乾淨的方式爲你重寫，這可能是一個很好的學習方式。 –

這些答案顯示CSS中存在不同種類的「居中」，我們稱這兩個文本居中並阻止居中。「文本對齊」屬性決定了文本行向上，向右，向左，居中，對齊的位置（右邊和左邊的文字之間有額外的填充以使它們齊平）。這通常被認爲是「居中」，你可以在WYSIWYG文本編輯中看到圖標。

當你做佈局時，你經常有另一個居中任務，你想要一個盒子在另一個盒子的中心。通過CSS的思維方式，這是盒子模型（幾乎所有東西都是CSS的盒子），並且您可以重新制定「將該盒子放在該盒子的中心」爲「確保內盒子的左邊距和右邊距爲一樣」。例如，如果外框寬200像素，內框寬120像素，則需要左邊距=右邊距，換句話說，每個邊距必須爲40像素。（40 + 120 + 40 = 200）。

硬編碼這是一個很多的計算，並且如果任何一個盒子改變大小，它將會中斷。幸運的是，我們有這樣的保證金：自動價值，它爲我們做了（它確實，「這個箱子寬120像素，我們有200像素的空間，然後我將多餘的80分成兩半，並將其分配給每個邊距」），並且即使在佈局（和框大小）改變時它也將繼續工作。

最後我們有垂直對齊。 CSS並沒有那麼令人滿意，但有一個竅門。有關詳情，請參閱http://www.w3.org/Style/Examples/007/center。

哦，和HTML'中心'元素混合上述兩個模型，但它沒有做得很好。我建議你遠離中心標籤（除了將標籤與風格分開）是一個好主意。

來源

2011-08-19 04:43:36

前面已經說了：擺脫中心標籤...

至於代碼韋斯利默奇已經給你一個很好的答案，雖然這將適用於所有的表。我想要你的風格，只適用於少數幾個元素試試這個：

.center{ 
    text-align:center; 
}

而且通過書面申請爲「TD」的元素：

<td class='navbar center'> 
     <a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a> 
</td>

來源

2011-08-19 07:22:00

爲什麼不是這個集中？

回答

相關問題