나는 주변 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;
}