I have an issue to center an element in my div.
I'm using display flex, align-self and justify-self to center it.
I think this is ok by this way, but I have an unknown element when I inspect from the web browser.
You can see on the right, there is an as striped element that I don't know where it come from.
Here is the parent element made with grid.
You can see the issue from the fiddle here
https://jsfiddle.net/Martin40/qtjphvga/3/
Here is my CSS
.customer_card{
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-self: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
Here is my HTML
<head><link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"></head>
<div class="customer_card">
<div class="customer_card_logo"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
Anyone know what's the problem ?
Thank you !
The "striped element" is just the grid gap you have defined on .customer_card here (doesn't cause the centering issue):
gap: 0px 10px;
To center the icon, replace the width/height-based approach with using padding instead. This way, you don't have to worry about the size of the icon which could cause misalignments:
.customer_card_logo {
/* width: 50px; */
/* height: 50px; */
padding: 0.5rem;
}
Try the modified snippet below:
.customer_card {
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-self: center;
text-align: center;
background: grey;
border-radius: 50%;
#width: 50px;
#height: 50px;
padding: 0.5rem;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo>.material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover>.material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<div class="customer_card">
<div class="customer_card_logo" title="Changer de client"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
</div>
<!-- language: lang-css -->
.customer_card {
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-content: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
<!-- language: lang-html -->
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<body>
<div class="customer_card">
<div class="customer_card_logo" title="Changer de client"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
</div>
</body>
<!-- end snippet -->
Using inline element span inside a div with display grid creates that gap. By adding width 100 percentage to your span will fix it.
Below you could find the code.
.customer_card{
background: green;
padding: 10px;
margin-bottom: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 20% 80%;
gap: 0px 10px;
justify-content: center;
justify-items: stretch;
align-items: center;
}
.customer_card_logo {
display: flex;
position: relative;
justify-self: center;
text-align: center;
background: grey;
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
}
.customer_card_logo > .material-icons-outlined {
width: 100%;
align-self: center;
justify-self: center;
font-size: 2rem;
transition: all 0.4s;
}
.customer_card_logo:hover > .material-icons-outlined {
transform: rotate(90deg);
}
.customer_card_name {
display: block;
font-weight: 600;
font-size: 1.5rem;
}
.customer_card_addresse {
font-size: 1.2rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<div class="customer_card">
<div class="customer_card_logo" title="Changer de client"><span class="material-icons-outlined"> autorenew </span></div>
<div class="customer_card_informations">
<span class="customer_card_name">Company Name</span>
<span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span>
</div>
</div>
https://jsfiddle.net/3b1kLzv2/5/
Thanks everyone.
I didn't talk about the gap of the grid but the stripped element in the flex ;)
justify-content: center;
On the customer_card_logo saved the problem.
Thanks !
Related
I have tried putting flex: 1 on both child elements of the .container(responsive - media query), and it's not working. Somehow my image (.container-img (div element)) is 'hiding'/overlapping/not showing.
I do not know where the issue might be in this case.
I would appreciate if someone more experienced took a look at this issue. Thank you!
<body>
<main class="main-container">
<div class="container">
<div class="container-img">
</div>
<div class="container-desc">
<span class="secondary-title">PERFUME</span>
<h1 class="main-title">Gabrielle Essence Eau De Parfum</h1>
<p class="text">
A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.
</p>
<div class="price">
<span class="price-current">$149.99</span>
<span class="price-discount">$169.99</span>
</div>
<button class="cart">
<img src="images/icon-cart.svg" alt="Shop">
<span class="cart-shop">Add to Cart</span>
</button>
</div>
</div>
</main>
</body>
body {
background: var(--clr-bg-main);
font-family: 'Montserrat', sans-serif;
margin: 0;
}
img {
display: block;
max-width: 100%;
object-fit: cover;
}
h1,
p {
margin: 0;
}
.main-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin: 2rem 1rem;
width: min(100% - 2rem, 800px);
min-height: 80vh;
display: flex;
flex-direction: column;
}
.container-img {
background: url('images/image-product-mobile.jpg');
background-repeat: no-repeat;
background-size: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
flex: 1;
}
.container-desc {
background: var(--clr-neutral);
padding: 2rem;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: flex;
flex-direction: column;
}
.main-title {
font-family: 'Fraunces', serif;
font-size: var(--fs-title-primary);
line-height: 1;
margin-top: 1rem;
}
.secondary-title,
.text,
.price-discount {
color: var(--clr-dark-grayish-blue);
}
.secondary-title {
font-size: var(--fs-title-secondary);
letter-spacing: 5px;
}
.text {
font-size: var(--fs-text-primary);
margin-top: 1rem;
line-height: 1.6;
}
.price {
margin-top: 2rem;
display: flex;
gap: 2rem;
align-items: center;
}
.price-current {
font-family: 'Fraunces', serif;
font-size: var(--fs-text-current-price);
color: var(--clr-bg-button-price);
}
.price-discount {
text-decoration: line-through;
}
.cart {
cursor: pointer;
border: 0;
outline: none;
background: var(--clr-bg-button-price);
font-size: var(--fs-text-button);
font-weight: var(--fw-bold);
margin-top: 1.5rem;
padding: 1.5rem 6rem;
border-radius: 10px;
}
.cart:hover,
.cart:active {
background: var(--clr-bg-button-hover);
}
.cart img {
display: inline-block;
margin-right: 1rem;
}
.cart-shop {
color: var(--clr-neutral);
letter-spacing: 0.5px;
}
#media (min-width: 40em) {
.container {
min-height: 60vh;
flex-direction: row;
align-items: center;
}
.container-img {
background: url('images/image-product-desktop.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 100;
}
.container-desc {
flex: 1;
}
}
Actually, i found the solution to this problem, which of course is pretty simple one. I have been focusing on the parent instead of a child element .container-desc specifically to put 'justify-items: center'. Lack of concentration.
I'm trying to duplicate this Div Skew Control that I created in a code-pen, that is working, but not responsive yet as I have not set the sizing(s). I'm trying to do the same in Elementor using the FlexBox method and can't seem to find the path/settings as it seems to break the layout when I try to even use the some css direct as show in the sample.
/*BEGIN FOOTER TEMPLATE*/
#media only screen and (max-width: 1440px)
{
HTML
{
font-size: 14px;
}
}
HTML BODY
{
font-family: "Montserrat", sans-serif;
}
.footer .footer-top
{
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-top .top-left
{
width: 45%;
min-height: 12rem;
padding: 0 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
background-color: yellow;
position: relative;
}
.footer .footer-top .top-left::after
{
content: "";
display: block;
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
width: 8rem;
height: auto;
background-color: yellow;
transform-origin: bottom right;
transform: skewX(-15deg);
}
.footer .footer-top .top-right
{
width: 55%;
padding-right: 2rem;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-top .top-right .top-right-content
{
width: 45%;
}
.footer .footer-top .top-right .top-right-content .heading
{
margin-bottom: 0;
color: #D30200;
font-weight: 600;
line-height: 0.9;
text-transform: uppercase;
}
.footer .footer-top .top-right .top-right-content .sub
{
margin-bottom: 0;
font-weight: 600;
color: #FFF;
}
.footer .footer-middle
{
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-middle .middle-left
{
width: 45%;
min-height: 12rem;
padding: 0 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
background-color: #000;
color: #FFF;
}
.footer .footer-middle .middle-left H4
{
margin-bottom: 0;
font-weight: 500;
text-transform: uppercase;
}
.footer .footer-middle .middle-left H4 SPAN
{
color: #D30200;
}
.footer .footer-middle .middle-right
{
width: 55%;
padding-right: 2rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-middle .middle-right::before
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: 0;
width: 8rem;
height: auto;
background-color: #FFF;
transform-origin: top left;
transform: skewX(-15deg);
}
.footer .footer-middle .middle-right .footer-links-container
{
width: 60%;
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-middle .middle-right .footer-links-container UL
{
margin-bottom: 0;
list-style: none;
}
.footer .footer-middle .middle-right .footer-links-container UL LI A
{
color: #000;
font-weight: 600;
}
.footer .footer-middle .middle-right .footer-links-container UL LI A:hover
{
color: #D30200;
}
.footer .footer-middle .middle-right .footer-logo-container
{
width: 40%;
text-align: center;
}
.footer .footer-bottom
{
color: white;
padding: 1rem;
background-color: #000;
}
.footer .footer-bottom P
{
font-size: 0.6rem;
margin-bottom: 0;
text-align: center;
}
.footer .footer-bottom A
{
color: white;
font-size: 0.6rem;
}
/*END FOOTER TEMPLATE*/
<!--bof footer-->
<footer class="footer">
<!--bof footer-top-->
<section class="footer-top">
<!--bof top-left-->
<div class="top-left"><strong>Text text text and more text text text, plus text text text</strong>
</div>
<!--eof top-left-->
<!--bof top-right-->
<div class="top-right">
<!--bof top-right-content-->
<div class="top-right-content">
<h2 class="heading">TEXT TEXT TEXT</h2>
<h4 class="sub">text text text text text text</h4>
</div>
<!--eof top-right-content-->
</div>
<!--eof top-right-->
</section>
<!--eof footer-top-->
<!--bof footer-middle-->
<section class="footer-middle">
<!--bof middle-left-->
<div class="middle-left">
<h4>TEXT TEXT TEXT <span>MORE TEXT TEXT</span></h4>
</div>
<!--eof middle-left-->
<!--bof middle-right-->
<div class="middle-right"><strong>Text text text and more text text text, plus text text text</strong>
</div>
<!--eof middle-right-->
</section>
<!--eof footer-middle-->
<!--bof footer-bottom-->
<section class="footer-bottom">
</section>
<!--eof footer-bottom-->
</footer>
<!--eof footer-->
The Elementor plugin is missing the transform function when you select a section and or div, it seems to only show the transform function when changing an element only inside a section/div and I'm looking to see if anyone else has run across this issue or knowns a way to make this work correctly.
Thank you in advance for any direction and or support provided.
I am having difficult to style the elements inside a div in vertically aligned position.
Here is the snippet. I am kind new to CSS flexbox.
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container {
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800;
line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width: 400px;
height: auto;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div><span class="framework_rating">3</span>React</div>
<div><span class="framework_rating">6</span>Blazor</div>
<div><span class="framework_rating">2</span>Knockout.js</div>
</div>
</div>
As you see the rating and name should be on the same line. I would appreciate any help.
A simple solution is to put a class for the div wrapping the elements that you want in the same line:
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container{
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800; line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width:400px;
height:auto;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 25%;
}
<body>
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div class="wrapper"><span class="framework_rating" >3</span>React</div>
<div class="wrapper"><span class="framework_rating" >6</span>Blazor</div>
<div class="wrapper"><span class="framework_rating" >2</span>Knockout.js</div>
</div>
</div>
</body>
Hope this helps. Best Regards.
you need to add this css on div of frameworks-wrapper id.
you can used flexbox here, which gives you flex layout
#frameworks-wrapper>div{
display: flex;
}
For more referance please check this flexbox guide
You just need to add css on the div inside your wrapper:
#import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container{
margin: auto;
width: 50%;
padding: 10px;
font-family: Lato, sans-serif;
}
#frameworks-wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid orangered;
background-color: white;
color: black;
border-radius: 25px;
font-weight: 800; line-height: 1.2;
font-family: 'Nunito', sans-serif;
font-size: 11px;
width:400px;
height:auto;
}
#frameworks-wrapper>div{
width: 100px;
display: flex;
justify-content: space-between;
}
.framework_rating {
display: flex;
flex-direction: column;
align-items: center;
background: orangered;
border-radius: 50%;
text-align: center;
}
<body>
<div id="container">
<div id="frameworks-wrapper">
<h3>Favorites Web Frameworks ratings</h3>
<div><span class="framework_rating" >3</span>React</div>
<div><span class="framework_rating" >6</span>Blazor</div>
<div><span class="framework_rating" >2</span>Knockout.js</div>
</div>
</div>
</body>
I have the following Code Pen:
https://codepen.io/anon/pen/RBdWOa
What I need is to show an icon 16x16 on top of the border in the very left position as the following image (red circles should be the icon).
I have a LeftIcon class for the following HTML element.
<i class="fa fa-search LeftIcon"></i>
.LeftIcon {
position: relative;
bottom: 0;
right: 0px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
But if you see is not aligned where I need it.
Any clue?
If you want to place an element on top of another one, set position relative on the parent element and position absolute on the child element. Then use top and left to position the item as you wish. In your case you are displaying elements relative to each other.
Here's how you can achieve what you are asking.
Set 'position: relative' on .DialogBox__message-content.
Then place the icon in the above div.
Set the following style on the .LeftIcon class.
position: absolute; //places the icon in absolute position to message-content*
top: calc(50% - 10px); // sets the top at 50% - half of the height (19px)*
left: -12px; // places the element on top of the line*
html body {
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
height: 100%;
-webkit-text-size-adjust: 100%;
font-size: 14px;
font-weight: 400;
font-style: normal;
}
div {
display: block;
}
.DialogBox {
text-align: right;
}
.DialogBox__message {
margin-bottom: 20px;
-webkit-transition: .35s ease;
transition: .35s ease;
text-align: right;
}
.DialogBox__messages-wrapper {
padding: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
min-height: 100%;
background-color: #f2f2f2;
border-style: solid;
}
.DialogBox__message-content {
background-color: #ffffff;
color: #525860;
padding: 15px 35px;
max-width: 400px;
display: inline-block;
margin-bottom: -20px;
margin-right: 20px;
margin-left: 0;
border-radius: 20px;
text-align: left;
word-wrap: break-word;
border-style: dashed;
position: relative;
}
.LeftIcon {
position: absolute;
top: calc(50% - 10px);
left: -12px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a first message.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a second message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a third message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a final message bye bye.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>
Roy Covered the answer pitty well. While I was working on this Codepen. The only difference is I used transform:translate() to to align the icon horizontally. In addition to this, you can use text-align: center;and line-height: 17px; to center the Font Awesome icon in the center.
https://codepen.io/Henk-io/pen/VBReaa?editors=1100
.LeftIcon {
position: absolute; /*Needs to be Absolute Positioned to the parent relative div*/
top: 50%; /*50% from the top*/
left: -10px; /*-10px left as the width is 20px*/
transform: translate(0, -50%); /*Moves postion of element*/
text-align: center; /*Aligns icon in center vertically*/
line-height: 17px; /*Aligns icon in center horizontally*/
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
I would use flex-box for such thing.
Here is an simplified version of yours example:
.dialog-box {
display: flex;
flex-direction: row;
align-items: center;
min-width: 100%;
height: 32px;
background: #cccccc;
}
.dialog-box__search {
min-width: 10%;
display: block;
color: #ff0000;
text-align: center;
}
.dialog-box__content {
text-align:center;
width: 100%;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="dialog-box">
<div class="dialog-box__search">
<i class="fa fa-search"></i>
</div>
<div class="dialog-box__content">
First content
</div>
</div>
</body>
</html>
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 ?
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>