How do I horizontally center a span element inside a div

Question

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?

JS Fiddle: 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
}

Related: http://stackoverflow.com/questions/7886460/center-align-span-text-inside-a-div — Ciro Santilli OurBigBook.com, Jul 19 '14 at 14:04
Here are two simple methods to center elements within a div, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 19 '15 at 21:15

score 200 · Answer 1 · edited Dec 20 '21 at 17:06

200

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

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

edited Dec 20 '21 at 17:06

Jesper

1,007
7
24

answered May 10 '13 at 20:07

user1721135

6,864
8
34
63

5

Always interesting to see different solutuions to the same problem. – Jim Aho Sep 23 '15 at 07:07
Only supported on browsers updated within the last couple years. http://caniuse.com/#feat=css-table – CamHart Oct 04 '17 at 17:36
1

best solution IMO – Martijn Scheffer Sep 14 '19 at 16:13
Why do we need display: table;? – kta Feb 02 '22 at 09:24
@kta otherwise margin auto wont work because span is normally like text, inline not block. Display table kind of combines the best of both worlds. If I remember... – user1721135 Jun 12 '23 at 00:17

score 167 · Accepted Answer · edited Mar 15 '17 at 07:28

167

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

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/

edited Mar 15 '17 at 07:28

Jase

1,369
2
12
24

answered May 10 '13 at 20:01

Adrift

58,167
12
92
90

1

This did the trick for me in a moderately complex theme i needed to hack a bit. The link to JSFiddle further up was awesome to allow me to test. I edited this entry to include to change "overflow:hidden " to "overflow:hidden;" – drew.. Nov 10 '14 at 16:03
1

Looks like a very clean solution. – Jim Aho Sep 23 '15 at 07:08
See Ahmed Bahtity answer below, style="text-align:center", it's a lot more concise. – Wallace Howery May 10 '18 at 15:46

score 19 · Answer 3 · edited Mar 06 '16 at 14:55

19

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

edited Mar 06 '16 at 14:55

Ibrahim Khan

20,616
7
42
55

answered Mar 06 '16 at 00:44

Ahmed Bahtity

536
4
9

score 11 · Answer 4 · edited Mar 29 '19 at 15:11

11

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.

Works even on <span> tags.

edited Mar 29 '19 at 15:11

Brian Burns

20,575
8
83
77

answered Mar 15 '16 at 20:03

Talha Imam

1,046
1
20
22

score 3 · Answer 5 · answered May 10 '13 at 20:05

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

score 1 · Answer 6 · answered Jul 25 '20 at 09:31

1

only css div you can center content

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

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

answered Jul 25 '20 at 09:31

Đọc truyện hay

1,913
21
17

score 0 · Answer 7 · answered May 10 '13 at 20:05

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:

 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.

How do I horizontally center a span element inside a div

7 Answers7