Question

我试图在我的div的中心对齐一些链接，但我也希望我的链接文本在左边对齐。

但我没有做到这一点，我能够左右对齐，但不能同时对齐。

你知道我们怎么做吗？

我在这里演示了我得到的内容：http://jsfiddle.net/HRKN4/

我有这个HTML：

<div  class="container">
    <h3>Title:</h3>
    <div class="content">
       <ul class="links">
          <li> <a  href="#">&raquo;&raquo; This link is bigger</a></li>
          <li> <a  href="#">&raquo;&raquo; Smaller 1</a></li>
          <li> <a  href="#">&raquo;&raquo; link 1</a></li> 
       </ul>
     </div>
</div>

这个CSS：

.container
{
    text-align:center;
    width:100%;
    margin:0 auto 0 auto;
    background:pink;
}

.content
{
    width:100%;
    height:300px;
}

.links 
{
    list-style-type:none;
    margin:0 auto; 
}

.links li a 
{
    text-decoration:none;
    background:red;
    color:#000;
    margin-top:20px;
    margin:0 auto; 
}

Answer 1

您可以使用表格布局：

.links {
   display:table;
}

和

.links li a {
   display:table-row;
}

Example

或者只是

.links li{
    text-align : left;
}

而不是display:table-row;

Example

Answer 2

您可以为＆＃34;内容指定宽度＆＃34; div然后使用margin:0 auto;将其居中，这样您仍然可以使用text-align:left;左对齐div中的文本，同时仍然将div保持在文档的中心位置。

Here is an updated JSFiddle

Answer 3

您可以尝试：

.links 
{
    display: inline-block;
    list-style-type:none;
    margin:0 auto; 
    text-align: left;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/m9daD/

Answer 4

另一种选择：

.links 
{
    list-style-type:none;
    width:50%;
    float:right;
}

http://jsfiddle.net/HRKN4/17/

Answer 5

如果您将..containerlinks设置为display:inline-block;和text-align:center;，那就足够了。

ul将获取最长链接的宽度，并将以text-align:center;为中心所有链接都可以在其中对齐。

<强> DEMO

.container {
    text-align:center;
    background:pink;
}
.content {
}
.links {
    list-style-type:none;
    display:inline-block;/* as an inline boxe it will centered from text align on .container */
    text-align:left;/* content will be aligned towards left */
}
.links li a {
    text-decoration:none;
    background:red;
    color:#000;
}

左对齐文本，但也在我div的中心对齐

5 个答案: