中心倍数链接

时间:2015-08-13 09:15:23

标签: html css

我有这段代码



.inline-subtitles {
    width:100%;
    display:table;
    margin:0 auto;
}

.inline-subtitles a {
    width:33%;
    padding:15px;
    background: #ececec;
    float:left;
    margin-right:10px;
}

<div class="inline-subtitles">
    <a href="#">Doc technique</a>
    <a href="#">Carnet utilisateur</a>
    <a href="#">Nomenclatures</a>
    <a href="#">Notice de pose</a>
    <a href="#">Notice réglages</a>
</div>
&#13;
&#13;
&#13;

我希望这些链接集中在容器.inline-subtitles

我尝试margin: 0 auto;但它不起作用。

感谢您的帮助!

5 个答案:

答案 0 :(得分:1)

将css规则text-align:center;添加到.inline-subtitles a

答案 1 :(得分:0)

在CSS中添加以下样式:

.inline-subtitles {
    text-align: center;
}

你也可以放弃这个:

margin:0 auto;

link to jsfiddle

答案 2 :(得分:0)

试试这个

.inline-subtitles a {
     text-align: center;
    }

&#13;
&#13;
.inline-subtitles {
    width:100%;
    display:table;
   
}

.inline-subtitles a {
    width:33%;
    padding:15px;
    background: #ececec;
    float:left;
    margin-right:10px;
    text-align:center;
    
}
&#13;
<div class="inline-subtitles">
    <a href="#">Doc technique</a>
    <a href="#">Carnet utilisateur</a>
    <a href="#">Nomenclatures</a>
    <a href="#">Notice de pose</a>
    <a href="#">Notice réglages</a>
</div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

Yous改变了这个:

group(7)

到此:

<div class="inline-subtitles">
<a href="#">Doc technique</a>
 <a href="#">Carnet utilisateur</a>
 <a href="#">Nomenclatures</a>
 <a href="#">Notice de pose</a>
 <a href="#">Notice réglages</a>
</div>

Here is the JSFiddle demo

使用<div class="inline-subtitles"> <center> <a href="#">Doc technique</a> <a href="#">Carnet utilisateur</a> <a href="#">Nomenclatures</a> <a href="#">Notice de pose</a> <a href="#">Notice réglages</a> </center> </div> 标记

基本围绕a标记

答案 4 :(得分:0)

.inline-subtitles {
    width:100%;
    display:table;
    margin:0 auto;
}

.inline-subtitles a {
    width:33%;
    padding:15px;
    background: #ececec;
    float:left;
    margin-right:10px;
    text-align: center; // <== just add this line...
}
<div class="inline-subtitles">
    <a href="#">Doc technique</a>
    <a href="#">Carnet utilisateur</a>
    <a href="#">Nomenclatures</a>
    <a href="#">Notice de pose</a>
    <a href="#">Notice réglages</a>
</div>