Center multiples links

Question

I've this code

.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>

I want these links to be centered into the container .inline-subtitles.

I try margin: 0 auto; but it does not work.

Thanks for your help !

score 1 · Accepted Answer · answered Aug 13 '15 at 09:26

1

add css rule text-align:center; to .inline-subtitles a

answered Aug 13 '15 at 09:26

Akhil

443
1
9
29

score 0 · Answer 2 · answered Aug 13 '15 at 09:16

0

Add following style to your CSS:

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

You can also drop this one:

margin:0 auto;

link to jsfiddle

answered Aug 13 '15 at 09:16

Keammoort

3,075
15
20

Kishan · Answer 3 · 2015-08-13T09:39:55.997

Try this

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

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

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

<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>

score 0 · Answer 4 · answered Aug 13 '15 at 09:19

Yous change this:

<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>

to this:

<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>

Here is the JSFiddle demo

Basically surround your a tags with the center tag

Isn't tag deprecated? - http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html I mean it works, but HTML is all about content and CSS should be about display aspects. — Keammoort, Aug 13 '15 at 09:24

score 0 · Answer 5 · answered Aug 13 '15 at 09:25

.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>

Center multiples links

5 Answers5