如何在一个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元素

回答

相关问题