디브 내부의 스판 요소를 수평으로 가운데 두려면 어떻게 해야 합니까?

디브 내부의 스판 요소를 수평으로 가운데 두려면 어떻게 해야 합니까?

나는 '뷰 웹사이트'와 '뷰 프로젝트' 두 링크를 주변 디브 안에 중심을 두려고 합니다.누가 이 일을 하기 위해 제가 무엇을 해야 하는지 알려주실 수 있나요?

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
}

다른 옵션은 스팬을 제공하는 것입니다.display: table;중앙에 배치합니다.margin: 0 auto;

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

하나의 선택은 다음과 같은 것을 제공하는 것입니다.<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/

<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 당신은 콘텐츠를 센터링할 수 있습니다.

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

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

제 생각에 당신은 그것들을 두 개의 분리된 선이 아니라 한 선에 중심을 두고 싶어하는 것 같습니다.그렇다면 다음 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를 추가하여 링크를 중심으로 하는 스판을 만들었습니다.마지막으로 스판에 정적인 폭을 추가했습니다.그러면 링크가 빨간색 디바 내의 한 줄에 중심을 맞춥니다.

언급URL : https://stackoverflow.com/questions/16489937/how-do-i-horizontally-center-a-span-element-inside-a-div