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   lt div gt     lt span gt       lt a href     target   blank  gt Visit website lt  a gt       lt a href     gt View project lt  a gt     lt  span gt   lt  div gt    CSS  div   background red overflow hidden    span a       background  222      color  fff      display block      float left      margin 10px 10px 0 0      padding 5px 10px

User · Answer

lt div style  text-align center  gt       lt span gt Short text lt  span gt  lt br   gt       lt span gt This is long text lt  span gt   lt  div gt

User · Answer

only css div you can center content div         display table         margin 0 auto         http   jsfiddle net 4q2r69te 1

User · Answer

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

User · Answer

One option is to give the  lt a gt  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

User · Answer

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  lt span gt  tags

User · Answer

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

User · Answer

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

[css] How do I horizontally center a span element inside a div

Examples related to css