alineacion elementos

#1 (**permalink**) 21/10/2017, 19:42

Hola, una consulta, tengo lo sig

<div class="item">
<div class="boton">boton</div>
<div class="titulo">titulo</div>
</div>

Lo que necesito es que boton esté alineado a la derecha y titulo al centro, ambos en la misma línea, hay alguna forma?

Saludos

ArturoGallegos · #2 (**permalink**) 22/10/2017, 15:13

utiliza flex

g3kdigital · #3 (**permalink**) 27/10/2017, 10:53

Hay 3 formas que puedo recomendarte:

Con float:

Código CSS:

Ver original.float.item{ text-align: center; }
.float .boton{ float: right; }

Usando flexbox:

Código CSS:

Ver original.flex.item{ display: flex; justify-content: center; }
.flex .titulo{ flex-grow: 1; text-align: center; }
.flex .boton{ order: 2; }

Usando position:

Código CSS:

Ver original.position.item{text-align: center; position: relative; }
.position .boton{ position: absolute; right: 0;  }

Cada uno con sus ventajas y contras. Aquí puedes ver una demo:
https://codepen.io/g3kdigital/pen/POoYNO?editors=1100