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

I am trying to center the two links 'view website' and 'view project' inside the surrounding div. Can someone point out what I need to do to make this work?

我正在尝试将两个链接“查看网站”和“查看项目”放在周围的div中。有人能指出我需要做些什么来让它工作吗?

JS Fiddle: http://jsfiddle.net/F6R9C/

JS小提琴:http://jsfiddle.net/F6R9C/

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
}

6 个解决方案

#1

One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):

一个选项是给显示一个内联块，然后应用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/

#2

107

another option would be to give the span display:table; and center it via margin:0 auto;

另一种选择是提供span display:table;通过边缘居中:0自动;

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

#3

Applying 'inline-block' to the element that is to be centered and applying text-align:center to the parent block did the trick for me.

将“inline-block”应用到要居中的元素，并将text-align:center应用到父块，这对我来说很有用。

Works even on <span> tags.

甚至可以在标签上工作。

#4

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

#5

Spans can get a bit tricky to deal with. if you set the width of teach span you can use

跨度可能会变得有点棘手。如果你设置了教学跨度的宽度，你可以使用

margin: 0 auto;

to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.

将它们居中，但它们最终会在不同的线上。我建议对你的结构尝试一种不同的方法。

Here is the jsfiddle I cam e up with off the top of my head: jsFiddle

这是我头顶上的琴提琴:琴提琴

EDIT:

编辑:

Adrift's answer is the easiest solution :)

Adrift的回答是最简单的解决方案:

#6

I assume you want to center them on one line and not on two separate lines based on your fiddle. If that is the case, try the following css:

我假设你想把它们集中在一条线上，而不是在你的小提琴上放在两条分开的线上。如果是这样，试试下面的css:

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

I removed the float since you want to center it, and then made the span surrounding the links centered by adding margin:0 auto to them. Finally, I added a static width to the span. This centers the links on one line within the red div.

我删除了浮动，因为你想把它居中，然后通过添加边框:0自动添加到它们，使围绕链接的跨度为居中。最后，我在span中添加了一个静态宽度。它将链接放在红色div中的一条线上。

#1