div 안에 span 요소를 가로로 가운데에 배치하는 방법

두 개의 링크를 'view website'로 연결하려고하고 'div project'안에 view project를 배치하려고합니다. 누군가이 일을하기 위해 내가해야 할 일을 지적 할 수 있습니까?div 안에 span 요소를 가로로 가운데에 배치하는 방법

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 
}

출처

2013-05-10 J82

관련 항목 : http://stackoverflow.com/questions/7886460/center-align-span-text-inside-a-div –

div, 세로, 가로 또는 양쪽 모두에 요소를 가운데에 배치하는 두 가지 간단한 방법이 있습니다 (순수 CSS) : http://stackoverflow.com/a/31977476/3597276 –

하나의 옵션은 <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/

출처

2013-05-10 20:01:17 Adrift

이것은 약간 해킹 할 필요가있는 다소 복잡한 주제에서 저를위한 트릭이었습니다. 더 이상 JSFiddle에 대한 링크는 테스트 할 수있게 해주는 데 아주 좋았습니다. 이 항목을 편집하여 "overflow : hidden"을 "overflow : hidden;"으로 변경했습니다. –

매우 깨끗한 솔루션처럼 보입니다. –

Thx! 좋은 해결책! 나는 바닥의 것들보다 낫다고 생각한다. – HappyCoder888

스팬 처리하기 까다로운 비트를 얻을 수 있습니다. 여러분이 가르치는 범위의 폭을 설정하면 당신은 그 중심을

margin: 0 auto;

를 사용할 수 있지만 다음 다른 라인에 끝낸다. 나는 당신의 구조에 대해 다른 접근법을 시도 할 것을 제안한다. 여기

내가 내 머리 위로 떨어져와 전자 캠 jsfiddle입니다 : jsFiddle

편집 :

표류의 대답은 쉬운 해결책 :

출처

2013-05-10 20:05:12

나는 당신이 그들을 중심으로 할 생각입니다 한 줄에 있지만 두 줄로 나누어서는 안됩니다. 이런 경우, 다음과 같은 CSS를 시도 :

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

나는 당신이 그것을 중심을 원하기 때문에 플로트를 제거하고 추가 마진을 중심으로 링크를 둘러싼 스팬했다 : 그들에게 0 자동. 마지막으로 스팬에 정적 너비를 추가했습니다. 이렇게하면 빨간색 div 내의 한 줄에 링크가 배치됩니다.

출처

2013-05-10 20:05:52 Duffmaster33

104

또 다른 옵션은 범위 display:table;을주고 margin:0 auto;

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

출처

2013-05-10 20:07:14 user1721135

나를 위해 일했습니다! – iamanyone

우수, 이제는 부모에게 스타일을 적용하지 않아도됩니다. –

같은 문제에 대한 다른 해결책을 찾는 것은 항상 흥미 롭습니다. –

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

출처

2016-03-06 00:44:21

그래,이 작동합니다. https://jsfiddle.net/miparnisari/pcb5sdzq/ –

이 중심 및 텍스트 정렬을 적용 할 수있는 요소에 '인라인 블록을'적용을 통해 중앙하는 것입니다 님의 센터 부모 블록이 나를 위해 트릭을했습니다.

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

출처

2016-03-15 20:03:29

div 안에 span 요소를 가로로 가운데에 배치하는 방법

답변

관련 문제