Question

我试图将两个链接'view website'和'view project'集中在周围的div中。有人可以指出我需要做些什么来使这项工作？

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
}

Answer 1

另一种选择是给出范围display:table;并通过margin:0 auto;

将其居中

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

Answer 2

一个选项是让<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/

Answer 3

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

Answer 4

将inline-block应用于要居中的元素并将text-align:center应用于父块为我做了诀窍。

甚至可以在<span>标签上使用。

Answer 5

Spans可能会遇到一些棘手的问题。如果你设置教学范围的宽度，你可以使用

margin: 0 auto;

将它们居中，但它们最终会出现在不同的行上。我建议你尝试一种不同的方法。

这是我头脑中的jsfiddle：jsFiddle

编辑：

Adrift的答案是最简单的解决方案：）

Answer 6

我假设你想把它们放在一条线上，而不是根据你的小提琴将它们放在两条不同的线上。如果是这种情况，请尝试以下css：

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

我删除了浮动，因为你想要将它居中，然后通过添加margin：0 auto来使链接周围的范围居中。最后，我在跨度上添加了一个静态宽度。这将链接集中在红色div中的一行上。

Answer 7

只有CSS div可以使内容居中

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

http://jsfiddle.net/4q2r69te/1/

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

7 个答案: