Centro de texto relativo al espacio disponible en 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>

Me gustaría que div # one esté centrado en el espacio entre el borde izquierdo del div principal y el borde izquierdo del botón de envío.

Answer 1

Algunas formas más de hacerlo:

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

Es difícil decir que el texto guardado no está centrado entre el borde izquierdo del contenedor div y el borde izquierdo del botón de envío.

Aquí hay una versión exacta de lo anterior:

<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

Hay una serie de técnicas enumeradas aquí

Sin embargo, si simplemente quiere que se guarde " " " Para que el texto esté centrado, creo que deberás darle un ancho a #one, por ejemplo

<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 es un ejemplo de un problema general con CSS, que es que no hay forma de calcular el 'espacio restante' en varios diseños.

Me he encontrado con situaciones en las que (a) necesitas un diseño exacto y (b) donde no sabes el tamaño del elemento flotante.

Ejemplo:

  

[---- campo de entrada que ocupa el 100% del espacio restante ----] [botón de ancho desconocido]

Usted pensaría que esto era posible, pero AFAIK, tiene que usar tablas para lograrlo. Ni siquiera hay una propuesta en CSS sobre cómo se solucionará esto en el futuro. sigh