Relativa Texto centro para o espaço disponível no 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>

Gostaria div # um ser centrado no espaço entre a borda esquerda da div pai ea borda esquerda do botão enviar.

Answer 1

A mais algumas maneiras de fazê-lo:

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

É difícil dizer que o saved texto não está centrada entre a borda esquerda do div recipiente e a borda esquerda do botão enviar.

Aqui está uma versão exata do acima:

<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

Há uma série de técnicas listadas aqui

No entanto, se você simplesmente queria que o texto "salvo" de ser centrado, acho que você precisa dar uma largura para #one, por exemplo.

<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

Este é um exemplo de um problema geral com CSS, o que é que não há nenhuma maneira de calcular o 'espaço restante' em vários layouts.

Já corri em situações em que você (a) precisa de um layout exato, e (b) em que você não sabe o tamanho do item flutuante.

Exemplo:

[---- campo de entrada que leva 100% do espaço restante ----] [botão de largura desconhecido]

Você pensaria que isso era possível, mas AFAIK, você tem que usar tabelas para alcançar este objectivo. Não há sequer uma proposta em CSS de como isso seria fixas no futuro. suspirar