如何在一個div內水平居中span元素

我想將兩個鏈接的'view website'和'view project'放在周圍的div中間。有人能指出我需要做什麼來完成這項工作嗎？如何在一個div內水平居中span元素

HTML

<div> 
    <span> 
    <a href="#" target="_blank">Visit website</a> 
    <a href="#">View project</a> 
    </span> 
</div>

CSS

div { background:red;overflow:hidden } 

span a { 
    background:#222; 
    color:#fff; 
    display:block; 
    float:left; 
    margin:10px 10px 0 0; 
    padding:5px 10px 
}

來源

2013-05-10 J82

相關：http://stackoverflow.com/questions/7886460/center-align-span-text-inside-a-div – 2014-07-19 14:04:10

這裏有兩個簡單的方法來集中一個div內的元素，垂直，水平或兩者（純CSS）：http://stackoverflow.com/a/31977476/3597276 – 2015-08-19 21:15:34

一種選擇是，得到<a>的inline-block的顯示，然後將包含塊上應用text-align: center;（去掉也是浮動的）：

個

div { 
    background: red; 
    overflow: hidden; 
    text-align: center; 
} 

span a { 
    background: #222; 
    color: #fff; 
    display: inline-block; 
    /* float:left; remove */ 
    margin: 10px 10px 0 0; 
    padding: 5px 10px 
}

http://jsfiddle.net/Adrift/cePe3/

來源

2013-05-10 20:01:17 Adrift

這對我來說是一個適中的複雜主題，我需要破解一下。 JSFiddle的進一步鏈接讓我可以測試真棒。我編輯了這個條目，包括將「overflow：hidden」更改爲「overflow：hidden;」 – 2014-11-10 16:03:39

看起來像一個非常乾淨的解決方案。 – 2015-09-23 07:08:09

Thx！好解決方案！我認爲比底部的更好。 – HappyCoder888 2016-12-27 07:46:54

跨度可以得到一個有點棘手處理。如果您設置示教跨度的寬度，則可以使用

margin: 0 auto;

將它們居中，但它們最後會在不同的行上結束。我會建議嘗試一種不同的方法來處理你的結構。

這裏是我CAMË了我的頭頂部的jsfiddle：jsFiddle

編輯：

漂泊的回答是最簡單的解決方案:)

來源

2013-05-10 20:05:12

我認爲要居中他們在一條線上，而不是基於你的小提琴在兩條單獨的線上。如果是這種情況，請嘗試以下的CSS：

div { background:red; 
     overflow:hidden; 
} 
span { display:block; 
     margin:0 auto; 
     width:200px; 
} 
span a { padding:5px 10px; 
     color:#fff; 
     background:#222; 
}

我刪除浮動，因爲要居中，然後由周圍加上保證金爲中心的鏈接跨度：0自動給他們。最後，我在span上添加了一個靜態寬度。這將鏈接集中在紅色div內的一行上。

來源

2013-05-10 20:05:52 Duffmaster33

104

另一選擇是，得到跨度display:table;和經由margin:0 auto;

span { 
display:table; 
margin:0 auto; 
}

來源

2013-05-10 20:07:14 user1721135

爲我工作！ – iamanyone 2014-04-04 13:26:00

優秀，現在我不必在父母上應用樣式。 – 2014-11-11 00:59:11

總是有趣的看到同樣的問題不同的解決方案。 – 2015-09-23 07:07:41

<div style="text-align:center"> 
    <span>Short text</span><br /> 
    <span>This is long text</span> 
</div>

來源

2016-03-06 00:44:21

是的，這個工程。 https://jsfiddle.net/miparnisari/pcb5sdzq/ – 2016-09-15 20:01:53

應用「內聯塊」來將被居中並應用文本對齊的元件居中：中心父母的塊爲我做了詭計。

即使在<span>標籤。

來源

2016-03-15 20:03:29

如何在一個div內水平居中span元素

回答

相關問題