Reputation: 146
I'm trying to create a list of story like on instagram. But i have a little problem with the text under the profile-image that is rounded (in circle). How can I center the text? I've tried with 'text-align: center;' but is not working, you can see above..
How can I fix this problem?
Btw, use the snippet code on 'fullscreen' to see correctly.
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
:root {
--main-color: #4D6275;
--second-color: #3F5060;
--body-bg: #2E3841;
--box-bg: #272F37;
--text-color: #D5D5D5;
--grey-color: #B2B2B2;
--simple-color: #C3C3C3;
--color-blue: #008080;
--color-red: #9C4646;
--content-height: 92px;
--space-top: 30px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgba(var(--b3f,250,250,250),1);
color: var(--text-color);
}
a {
text-decoration: none;
}
button:focus {
outline: none;
}
input:focus {
outline: none;
}
.content {
margin: 0 auto;
margin-top: 30px;
max-width: 614px;
width: 100%;
}
.stories {
background-color: #fafafa;
border: 1px solid rgba(var(--b6a,219,219,219),1);
border-radius: 2.5px;
width: 100%;
height: 110px;
}
.stories-items {
display: flex;
margin-top: 15px;
}
.btn-type-story {
border: none;
background: unset;
color: unset;
outline: none;
}
.story-img {
width: 56px;
height: 56px;
-webkit-border-radius: 56px;
-webkit-background-clip: padding-box;
-moz-border-radius: 56px;
-moz-background-clip: padding;
border-radius: 56px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
display: block;
border: 2px solid transparent;
border-color: #fff;
box-shadow: 0 0 0 1px lightgray;
}
.active .story-img {
box-shadow: 0 0 0 2px #2EB14D;
}
.story-name {
color: rgba(var(--f52,142,142,142),1);
display: block;
font-size: 12px;
line-height: 16px;
max-width: 64px;
overflow: hidden;
position: absolute;
text-align: center;
text-overflow: ellipsis;
top: 110px;
white-space: nowrap;
}
.active .story-name {
color: rgba(var(--i1d,38,38,38),1);
}
.s-item:first-child {
margin-left: 13px;
}
.s-item {
margin-left: 20px;
}
<html>
<body>
<div class="content">
<div class="stories">
<div class="stories-items">
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg')"></div>
<div class="story-name">
cristiano
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.fcbarcelonanoticias.com/uploads/s1/12/04/53/6/neymar-viaje.jpeg')"></div>
<div class="story-name">
Neymar
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.gds.ro/wp-content/uploads/2021/08/messi.jpg')"></div>
<div class="story-name">
messi
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.prosport.ro/wp-content/uploads/2020/10/Kylian-Mbappe-6-scaled.jpg')"></div>
<div class="story-name">
Mbappe
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://s.hs-data.com/bilder/spieler/gross/19198.jpg')"></div>
<div class="story-name">
sr4
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://bayernstrikes.com/wp-content/uploads/getty-images/2017/07/1233654260.jpeg')"></div>
<div class="story-name">
Joshua
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/FRA-ARG_%2811%29_-_Paul_Pogba_%28cropped_2%29.jpg')"></div>
<div class="story-name">
Pogba
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://cacheimg.gsp.ro/autocrop/smp-images-production/gsp.ro/30012021/1611999491716.jpg?width=848&height=0')"></div>
<div class="story-name">
Rashford
</div>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 1
Views: 69
Reputation: 2137
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
:root {
--main-color: #4D6275;
--second-color: #3F5060;
--body-bg: #2E3841;
--box-bg: #272F37;
--text-color: #D5D5D5;
--grey-color: #B2B2B2;
--simple-color: #C3C3C3;
--color-blue: #008080;
--color-red: #9C4646;
--content-height: 92px;
--space-top: 30px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgba(var(--b3f,250,250,250),1);
color: var(--text-color);
}
a {
text-decoration: none;
}
button:focus {
outline: none;
}
input:focus {
outline: none;
}
.content {
margin: 0 auto;
margin-top: 30px;
max-width: 614px;
width: 100%;
}
.stories {
background-color: #fafafa;
border: 1px solid rgba(var(--b6a,219,219,219),1);
border-radius: 2.5px;
width: 100%;
height: 110px;
}
.stories-items {
display: flex;
margin-top: 15px;
}
.btn-type-story {
border: none;
background: unset;
color: unset;
outline: none;
}
.story-img {
width: 56px;
height: 56px;
-webkit-border-radius: 56px;
-webkit-background-clip: padding-box;
-moz-border-radius: 56px;
-moz-background-clip: padding;
border-radius: 56px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
display: block;
border: 2px solid transparent;
border-color: #fff;
box-shadow: 0 0 0 1px lightgray;
}
.active .story-img {
box-shadow: 0 0 0 2px #2EB14D;
}
.story-name {
color: rgba(var(--f52,142,142,142),1);
display: block;
font-size: 12px;
line-height: 16px;
max-width: 64px;
overflow: hidden;
position: absolute;
text-align: center;
text-overflow: ellipsis;
top: 110px;
white-space: nowrap;
width: 100%;
}
.active .story-name {
color: rgba(var(--i1d,38,38,38),1);
}
.s-item:first-child {
margin-left: 13px;
}
.s-item {
margin-left: 20px;
}
<div class="content">
<div class="stories">
<div class="stories-items">
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg')"></div>
<div class="story-name">
cristiano
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.fcbarcelonanoticias.com/uploads/s1/12/04/53/6/neymar-viaje.jpeg')"></div>
<div class="story-name">
Neymar
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.gds.ro/wp-content/uploads/2021/08/messi.jpg')"></div>
<div class="story-name">
messi
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.prosport.ro/wp-content/uploads/2020/10/Kylian-Mbappe-6-scaled.jpg')"></div>
<div class="story-name">
Mbappe
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://s.hs-data.com/bilder/spieler/gross/19198.jpg')"></div>
<div class="story-name">
sr4
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://bayernstrikes.com/wp-content/uploads/getty-images/2017/07/1233654260.jpeg')"></div>
<div class="story-name">
Joshua
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/FRA-ARG_%2811%29_-_Paul_Pogba_%28cropped_2%29.jpg')"></div>
<div class="story-name">
Pogba
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://cacheimg.gsp.ro/autocrop/smp-images-production/gsp.ro/30012021/1611999491716.jpg?width=848&height=0')"></div>
<div class="story-name">
Rashford
</div>
</button>
</div>
</div>
</div>
</div>
Upvotes: 0
Reputation: 170
On the container write
display: flex;
justify-content: center;
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
:root {
--main-color: #4D6275;
--second-color: #3F5060;
--body-bg: #2E3841;
--box-bg: #272F37;
--text-color: #D5D5D5;
--grey-color: #B2B2B2;
--simple-color: #C3C3C3;
--color-blue: #008080;
--color-red: #9C4646;
--content-height: 92px;
--space-top: 30px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgba(var(--b3f,250,250,250),1);
color: var(--text-color);
}
a {
text-decoration: none;
}
button:focus {
outline: none;
}
input:focus {
outline: none;
}
.content {
margin: 0 auto;
margin-top: 30px;
max-width: 614px;
width: 100%;
}
.stories {
background-color: #fafafa;
border: 1px solid rgba(var(--b6a,219,219,219),1);
border-radius: 2.5px;
width: 100%;
height: 110px;
}
.stories-items {
display: flex;
margin-top: 15px;
}
.btn-type-story {
border: none;
background: unset;
color: unset;
outline: none;
display: flex;
justify-content: center;
}
.story-img {
width: 56px;
height: 56px;
-webkit-border-radius: 56px;
-webkit-background-clip: padding-box;
-moz-border-radius: 56px;
-moz-background-clip: padding;
border-radius: 56px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
display: block;
border: 2px solid transparent;
border-color: #fff;
box-shadow: 0 0 0 1px lightgray;
}
.active .story-img {
box-shadow: 0 0 0 2px #2EB14D;
}
.story-name {
color: rgba(var(--f52,142,142,142),1);
display: block;
font-size: 12px;
line-height: 16px;
max-width: 64px;
overflow: hidden;
position: absolute;
text-align: center;
text-overflow: ellipsis;
top: 110px;
white-space: nowrap;
}
.active .story-name {
color: rgba(var(--i1d,38,38,38),1);
}
.s-item:first-child {
margin-left: 13px;
}
.s-item {
margin-left: 20px;
}
<html>
<body>
<div class="content">
<div class="stories">
<div class="stories-items">
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg')"></div>
<div class="story-name">
cristiano
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.fcbarcelonanoticias.com/uploads/s1/12/04/53/6/neymar-viaje.jpeg')"></div>
<span class="story-name">
Neymar
</span>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.gds.ro/wp-content/uploads/2021/08/messi.jpg')"></div>
<div class="story-name">
messi
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.prosport.ro/wp-content/uploads/2020/10/Kylian-Mbappe-6-scaled.jpg')"></div>
<div class="story-name">
Mbappe
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://s.hs-data.com/bilder/spieler/gross/19198.jpg')"></div>
<div class="story-name">
sr4
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://bayernstrikes.com/wp-content/uploads/getty-images/2017/07/1233654260.jpeg')"></div>
<div class="story-name">
Joshua
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/FRA-ARG_%2811%29_-_Paul_Pogba_%28cropped_2%29.jpg')"></div>
<div class="story-name">
Pogba
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://cacheimg.gsp.ro/autocrop/smp-images-production/gsp.ro/30012021/1611999491716.jpg?width=848&height=0')"></div>
<div class="story-name">
Rashford
</div>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 1
Reputation: 3300
Set width same image above i.e width: 56px;
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
:root {
--main-color: #4D6275;
--second-color: #3F5060;
--body-bg: #2E3841;
--box-bg: #272F37;
--text-color: #D5D5D5;
--grey-color: #B2B2B2;
--simple-color: #C3C3C3;
--color-blue: #008080;
--color-red: #9C4646;
--content-height: 92px;
--space-top: 30px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: rgba(var(--b3f, 250, 250, 250), 1);
color: var(--text-color);
}
a {
text-decoration: none;
}
button:focus {
outline: none;
}
input:focus {
outline: none;
}
.content {
margin: 0 auto;
margin-top: 30px;
max-width: 614px;
width: 100%;
}
.stories {
background-color: #fafafa;
border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
border-radius: 2.5px;
width: 100%;
height: 110px;
}
.stories-items {
display: flex;
margin-top: 15px;
}
.btn-type-story {
border: none;
background: unset;
color: unset;
outline: none;
}
.story-img {
width: 56px;
height: 56px;
-webkit-border-radius: 56px;
-webkit-background-clip: padding-box;
-moz-border-radius: 56px;
-moz-background-clip: padding;
border-radius: 56px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
display: block;
border: 2px solid transparent;
border-color: #fff;
box-shadow: 0 0 0 1px lightgray;
}
.active .story-img {
box-shadow: 0 0 0 2px #2EB14D;
}
.story-name {
color: rgba(var(--f52, 142, 142, 142), 1);
display: block;
font-size: 12px;
line-height: 16px;
width: 56px;
overflow: hidden;
position: absolute;
text-align: center;
text-overflow: ellipsis;
top: 110px;
white-space: nowrap;
}
.active .story-name {
color: rgba(var(--i1d, 38, 38, 38), 1);
}
.s-item:first-child {
margin-left: 13px;
}
.s-item {
margin-left: 20px;
}
<html>
<body>
<div class="content">
<div class="stories">
<div class="stories-items">
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://pbs.twimg.com/profile_images/1157313327867092993/a09TxL_1_400x400.jpg')"></div>
<div class="story-name">
cristiano
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.fcbarcelonanoticias.com/uploads/s1/12/04/53/6/neymar-viaje.jpeg')"></div>
<div class="story-name">
Neymar
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.gds.ro/wp-content/uploads/2021/08/messi.jpg')"></div>
<div class="story-name">
messi
</div>
</button>
</div>
<div class="s-item active">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://www.prosport.ro/wp-content/uploads/2020/10/Kylian-Mbappe-6-scaled.jpg')"></div>
<div class="story-name">
Mbappe
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://s.hs-data.com/bilder/spieler/gross/19198.jpg')"></div>
<div class="story-name">
sr4
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://bayernstrikes.com/wp-content/uploads/getty-images/2017/07/1233654260.jpeg')"></div>
<div class="story-name">
Joshua
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/FRA-ARG_%2811%29_-_Paul_Pogba_%28cropped_2%29.jpg')"></div>
<div class="story-name">
Pogba
</div>
</button>
</div>
<div class="s-item">
<button class="btn-type-story" aria-label="Neymar story" tabindex="0">
<div class="story-img" style="background-image: url('https://cacheimg.gsp.ro/autocrop/smp-images-production/gsp.ro/30012021/1611999491716.jpg?width=848&height=0')"></div>
<div class="story-name">
Rashford
</div>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 2
Reputation: 202
Hei, you can try using
.story-name {
margin-left:auto;
margin-right:auto;
}
and remove the text-align:center
property
Upvotes: 0