Foros del Web » Creando para Internet » CSS »

alineacion elementos

Estas en el tema de alineacion elementos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/10/2017, 19:42
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
alineacion elementos

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
  #2 (permalink)  
Antiguo 22/10/2017, 15:13
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 4 meses
Puntos: 1146
Respuesta: alineacion elementos

utiliza flex
  #3 (permalink)  
Antiguo 27/10/2017, 10:53
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 8 meses
Puntos: 39
Respuesta: alineacion elementos

Hay 3 formas que puedo recomendarte:

Con float:

Código CSS:
Ver original
  1. .float.item{ text-align: center; }
  2. .float .boton{ float: right; }

Usando flexbox:
Código CSS:
Ver original
  1. .flex.item{ display: flex; justify-content: center; }
  2. .flex .titulo{ flex-grow: 1; text-align: center; }
  3. .flex .boton{ order: 2; }

Usando position:
Código CSS:
Ver original
  1. .position.item{text-align: center; position: relative; }
  2. .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
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital

Etiquetas: alineacion, class, elementos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:15.