CSS : 수레가 들어있는 div의 중심 요소

Question

A, B, C 세 가지 요소가있는 div가 있습니다. A와 B가 각각 왼쪽과 오른쪽에 있고 C가 div의 중심에 있도록하고 싶습니다. 나는 A와 B를 왼쪽과 오른쪽으로 띄우고 B를 중심에 띄운다. 불행하게도,이 사업부의 중앙에 C를 allign하지만, 여기에 A와 B 사이의 공간의 중심에 내가 주요 사업부와에 각각으로 요소를 중심 않는 방법 demo

<div id="user-links"> 
    <div class="user-link1"> <a href=""> Timeline </a></div> 
    <div class="user-link"> 5 Following </div> 
    <div class="user-link2"> <a href=""> <strong> + Follow </strong> </a></div> 
</div> 

#user-links { 
    width:500px; 
    height:500px; 
    background-color:red; 
} 
.user-link1 { 
    float: left; 
    margin:5px; 
    width:200px; 
    height:200px; 
    background-color:yellow; 
} 
.user-link2 { 
    float: right; 
    width:150px; 
    height:150px; 
    margin:5px; 
    background-color:blue; 
    } 

.user-link { 
    text-align:center; 
    } 

하지 않습니다 왼쪽과 오른쪽으로 떠있는 두 div 사이의 공간을 고려하지 않습니까?

Answer 1

당신은 당신의 .user-link클래스에 display: inline;를 추가 할 :

.user-link { 
    display: inline; 
} 

Updated fiddle

업데이트 나는 당신의 후 가정 무엇

내가에 HTML을 수정 한 :

New Fiddle

Answer 2

u는 당신의 CSS와 같은 것을 할 경우 :

.user-link { 
    text-align:center; 
    float:left; 
    } 

가 작동하지만이 없다면, 그것은 대규모의 구조를 잃게됩니다 때문에, 그것에 폭을 제공해야합니다 항목 ...

Answer 3

.user-link { 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 4

쉬운 파이 :

플로트 제 왼쪽 세 번째, 그리고 초 등 ond 하나 오른쪽으로.

CSS 코드 :

#user-links { 
    width:800px; 
    height:400px; 
    background:#CCC; 
} 

.user-link1, .user-link2 { 
    float:left; 
} 

.user-link, .user-link1 { 
    width:200px; 
} 

.user-link1 { 
    background:blue; 
} 

.user-link { 
    float:right; 
    background:red; 
} 

.user-link2 { 
    width:400px; 
    background:green; 
} 

JS 바이올린 : 인라인 block` 스태킹 것을 방지하지만 2 열 내부의 내용이없이 "중심"되지 않습니다 : http://jsfiddle.net/MJ6vf/