CSS의 가용 공간에 대한 중앙 텍스트

Question

<div style="width: 300px">
<div id="one" style="float: left">saved</div><input type="submit" id="two" style="float: right" value="Submit" />
</div>

Div#One이 부모 DIV의 왼쪽 가장자리와 제출 버튼의 왼쪽 가장자리 사이의 공간에 중앙에있는 것을 원합니다.

Answer 1

그것을하는 몇 가지 방법 :

<div style="width: 300px">
    <input type="submit" id="two" style="float: right" value="Submit" />
    <div id="one" style="text-align:center;">saved</div>
</div>

텍스트를 말하기는 어렵습니다 saved 컨테이너의 왼쪽 가장자리 사이에 중앙에 있지 않습니다 div 제출 버튼의 왼쪽 가장자리.

위의 정확한 버전은 다음과 같습니다.

<div style="width: 300px;">
    <input type="submit" id="two" style="float: right; width:64px;" value="Submit" />
    <div id="one" style="text-align:center;margin-right:64px;">saved</div>
</div>

Answer 2

많은 기술이 나열되어 있습니다 여기

그러나 단순히 "저장된"텍스트를 중심으로 원한다면 #one에 너비를 주어야한다고 생각합니다.

<div style="width: 300px">
<div id="one" style="float: left;text-align:center;width:80%">saved</div>
<input type="submit" id="two" style="float: right;width:20%" value="Submit" />
</div>

Answer 3

이것은 CSS의 일반적인 문제의 예입니다. 이는 다양한 레이아웃에서 '나머지 공간'을 계산할 방법이 없다는 것입니다.

나는 당신이 (a) 정확한 레이아웃이 필요한 상황과 (b) 부유 식품의 크기를 모르는 상황에 처해 있습니다.

예시:

---- 나머지 공간의 100%를 차지하는 입력 필드 ----] [알 수없는 폭의 버튼

당신은 이것이 가능하다고 생각할 것이지만, Afaik, 당신은 이것을 달성하기 위해 테이블을 사용해야합니다. CSS에는 이것이 미래에 어떻게 해결 될지에 대한 제안도 없습니다. 한숨을 쉬다