eloism eloism - 26 days ago 8
CSS Question

span position inside a flexbox

I'm having troubles with one of a my flex items.

I'm trying to position the 2

spans
of my flex div so that one is above the other, but it looks like the properties of
flex
force them to be next of each other.

Here is what I'm looking to do (the date element)

and here is what I have :



#til-container #til-header #til-date-container {
display: flex;
align-items: center;
position: absolute;
top: 30px;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid #CCC;
background: white;
}

#til-container #til-header #til-date-container #til-date {
display: flex;
align-items: center;
position: relative;
margin: auto;
width: 52px;
height: 52px;
border-radius: 50%;
background: #d24949;
color: #FFF;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 900;
text-align: center;
}

#til-container #til-header #til-date-container #til-day {
font-size: 20px;
}

#til-container #til-header #til-date-container #til-month {
font-size: 10px;
}

<div id="til-container">

<div id="til-header">
<div id="til-date-container">
<div id="til-date">
<span id="til-day">25</span>
<br/>
<span id="til-month">dec</span>
</div>
</div>
</div>

</div>





I've tried several things such has displaying the spans as blocks so they take the full width of the container and force the next span to position below the first one, but that wouldn't work. Any ideas ?

Answer

Using flex, you could add to #til-date

flex-direction: column;
justify-content: center;

I edited your snippet to add it :

#til-container #til-header #til-date-container {
	display: flex;
	align-items: center;
	position: absolute;
	top: 30px;
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid #CCC;
	background: white;
}

#til-container #til-header #til-date-container #til-date {
	display: flex;
	align-items: center;
	position: relative;
	margin: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #d24949;
	color: #FFF;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;

    /* Added */
    flex-direction: column;
    justify-content: center;
}

#til-container #til-header #til-date-container #til-day {
	font-size: 20px;
}

#til-container #til-header #til-date-container #til-month {
	font-size: 10px;
}
<div id="til-container">
	
	<div id="til-header">
		<div id="til-date-container">
			<div id="til-date">
				<span id="til-day">25</span>
				<br/>
				<span id="til-month">dec</span>
			</div>
		</div>
	</div>
	
</div>