div 내부에 span 요소를 가로로 중앙에 배치하는 방법

나는 주변 div 안에 두 개의 링크 '웹 사이트보기'와 '프로젝트보기'를 중앙에 배치하려고합니다. 누군가 내가이 작업을 수행하기 위해해야 ​​할 일을 지적 할 수 있습니까?

JS 피들 : 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
}

한 가지 옵션은 <a>표시 를 제공 inline-block한 다음 컨테이너 text-align: center;블록에 적용 하는 것입니다 (플로트도 제거).

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/

또 다른 옵션은 범위를 제공하는 것 display:table;과를 통해 중앙margin:0 auto;

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

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

적용 inline-block을 중심으로되어야하는 요소와 적용 text-align:center상위 블록에 나를 위해 속임수를 썼는지.

<span>태그 에서도 작동 합니다.

스팬은 처리하기가 약간 까다로울 수 있습니다. 티치 스팬의 너비를 설정하면 사용할 수 있습니다

margin: 0 auto;

중앙에 배치하지만 다른 선으로 끝납니다. 나는 당신의 구조에 다른 접근 방식을 시도하는 것이 좋습니다.

다음은 내 머리 꼭대기에서 찍은 jsfiddle입니다. jsFiddle

편집하다:

Adrift의 대답은 가장 쉬운 해결책입니다. :)

나는 당신이 당신의 바이올린을 기반으로 두 개의 별도 라인이 아닌 한 줄에 중앙에 배치하고 싶다고 가정합니다. 이 경우 다음 css를 시도하십시오.

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

중심을 맞추고 싶기 때문에 플로트를 제거한 다음 margin : 0 auto를 추가하여 링크를 중심으로 둘러싸는 스팬을 만들었습니다. 마지막으로 스팬에 정적 너비를 추가했습니다. 이렇게하면 빨간색 div 내의 한 줄에 링크가 집중됩니다.

CSS div 만 콘텐츠를 중앙에 배치 할 수 있습니다.

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

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