플로팅 요소를 두 개의 플로팅 요소 사이에 완벽하게 배치하려면 어떻게합니까?

Question

다른 두 텍스트 사이에 텍스트를 가운데 맞추기가 어렵다는 것을 알고 있습니다.

HMTL :

<div class="main-container"> 
    <div class="footer"> 
     <span class="left_edge">@left</span> 
     <span class="center">@center</span> 
     <span class="right_edge">@right</span> 
    </div> 
</div> 

CSS : 올바르게 표시 그림과 같이

.footer{ 
    background: #e33; 
    padding: 5px; 
} 
.left_edge{ 
    float: left; 
} 
.center{ 
    float: left; 
} 
.left_edge{ 
    float: right; 
} 

어떻게 완벽하게 .center을 중심합니까?

Answer 1

한 가지 방법은 inline-block에 중간 요소의 display을 설정 한 후 수평 중심의 부모 요소에 text-align: center을 사용하는 것입니다 : 또는

Example Here

.footer { 
    background: #e33; 
    padding: 5px; 
    text-align: center; 
} 
.left_edge { 
    float: left; 
} 
.center { 
    display: inline-block; 
} 
.right_edge { 
    float: right; 
} 

, 당신 요소가 떠 다니는 것을 피하고 대신 다음 방법을 사용할 수 있습니다.

.footer > span { 
    display: inline-block; 
    width: 33.333% 
} 
.left_edge { 
    text-align: left; 
} 
.center { 
    text-align: center; 
} 
.right_edge { 
    text-align: right; 
}