Centrado vertical de texto en Flex

quico5 · #1 (**permalink**) 30/11/2014, 15:36

Tengo una columna con unos enlaces repartidos verticalmente, me gustaría centrar el contenido de los enlaces horizontal y verticalmente ya sea texto o imágenes y no me sale, gracias

Código HTML:

 <nav am-nav="row" am-cel="one">
				<a href="">1</a>
				<a href="">2</a>
				<a href="">3</a>
			</nav>

Código HTML:

nav[am-nav~=row]{
	display: flex;
	//flex-direction: column;
	flex-flow: column wrap;
	justify-content: space-around;
	justify-content: flex-end;
	a{
		background-image: linear-gradient(lime, silver);
		color: #333;
		display: block;
		flex: 1;
		text-align: center;
		vertical-align: middle; /*supongo que solo funciona en tablas*/
	}
}

pzin · #2 (**permalink**) 30/11/2014, 16:34

Prueba con:

Código CSS:

Ver originalalign-items: center;

¿Qué se supone que es am-nav y am-cel?

quico5 · #3 (**permalink**) 30/11/2014, 16:49

gracias por responder, con (align-items: center;) pierdo el efecto (width:100%;) quedando centrado con el ancho del contenido, efecto (margin:0 auto;) no deseado

am- AttributeModule, creo que viene siendo un derivado de data- , es una propuesta, aunque aun no he comprobado si la W3C lo permite como si fuese un data-

am-row y am-cel es la grilla

am-nav=row/column es para representar los enlaces en horizontal o vertical

supongo que en buenas practicas serian contenedores diferentes, estoy experimentando

me gustaría que el resultado fuese como table, pero mediante Flex:

Código HTML:

display:table-cell;
text-align:center;
vertical-align:middle;

He encontrado este ejemplo, usan align-self, pero usan tres niveles de etiquetas y yo lo estoy intentando con dos etiquetas, <nav> y <a>

Código HTML:

<div class= "flex-container stretch">
 <div class= "flex-item"><p> 1</p></div>
 <div class= "flex-item"><p> 2</p></div>
 <div class= "flex-item"><p> 3</p></div>
 <div class= "flex-item"><p> 4</p></div>
 <div class= "flex-item"><p> 5</p></div>
 <div class= "flex-item"><p> 6</p></div>
 <div class= "flex-item"><p> 7</p></div>
</div>

<style>
.flex-container {
 width : 250px;
 height : 200px;
 padding : 5px;
 margin : 10px auto;
 background-color : #124678;
 display : -webkit-flex;
 display : -ms-flexbox;
 display : flex;
 -webkit-flex-wrap : wrap;
 -ms-flex-wrap : wrap;
 flex-wrap : wrap;
 }
.flex-item {
 display : inherit;
 width : 50px;
 min-height : 50px;
 background-color : #ccc;
 margin : 5px;
 }
.flex-item p {
 width : 100%;
 text-align : center;
 align-self : center;
 margin : 0;
 }
.flex-container.stretch {
 -webkit-align-content : stretch;
 -ms-flex-line-pack : stretch;
 align-content : stretch;
 }
</style>

quico5 · #4 (**permalink**) 30/11/2014, 19:26

Lo he apañado así:

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8"/>
	<title>Document</title>
	<link rel="stylesheet" href="style.css"/>
</head>
<body am-panel>

	<header>HEADER</header>
	<section>
	
		<div am-row>
			<div am-cel="one">
			
				<nav am-nav="row">
					<a href=""><span>1</span></a>
					<a href=""><span>2</span></a>
					<a href=""><span>3</span></a>
				</nav>
				
			</div>		
			<div am-cel="five">
				
				body
				
			</div>
			
		</div>

	</section>
	<footer>FOOTER</footer>
	
</body>
</html>

Código:

 /* style.less */
[am-nav]{
	flex: 1;
	display: flex;
	flex-direction: column;
	a{
		background-image: linear-gradient(lime, silver);
		color: #333;
		display: flex;
		flex: 1;
		span{
			flex: 1;
			align-self: center;
			text-align: center;
		}
	}
}