KPC
Kevin Powell - Community•4w ago
Suggon

Centering a div

Hello, I'm having a hard time centering this overflowing div. https://codepen.io/Suggon/pen/wvbrRqa?editors=1100 Is there a specific property that can help achieve this? (please note that the inset-based centering is important for my usecase)
No description
2 Replies
Chris Bolson
Chris Bolson•4w ago
You could do something like this: 
.container .text {
    position: absolute;
    inset: 0 50%;
    width: 100%;
    margin: auto;
    transform: translateX(-50%);
    height: 2lh;
    outline: 2px solid red;
    border-radius: 3px;
}
.container .text {
    position: absolute;
    inset: 0 50%;
    width: 100%;
    margin: auto;
    transform: translateX(-50%);
    height: 2lh;
    outline: 2px solid red;
    border-radius: 3px;
}
Suggon
Suggon•4w ago
ooh that's a nice solution! although it has a tiny issue where smaller divs always take container's full with, fits my usecase regardless thank you! update: just realized all divs already take full width regardless of size, because of inset 🤦 with that out of the way, yes it's the perfect solution 👍
Want results from more Discord servers?
Add your server
More Posts
Bottom Triangle effectI want to make this similar effect in CSS. Is there a good resource on how to make an effect like tThis works on Desktop, but Mobile it's deform... please helphttps://codepen.io/Auto-Ma/pen/KKLXGzQ The layout is fine until a certain small size screen where sHow to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?I have a grid setup on the body of my page and define two rows. Row A is fixed at 60px and row B is How to make images responsive using srcset and size attribute??I have tried using srcset but it isnt working the demo link line 37 https://github.com/kvandana451/Atop bar alertHi guys, I'm making an alert bar with the <marquee> tag but I don't want it to pass information, I wcan i get some feedback on my mobile navbar?let me know what you think: https://aldenaire-barbershop.netlify.app/box-sizing: border-boxWhat does box-sizing: border-box actually do? how is it different from the default box-sizing? And IHow to store redux store to localstorage and get it when page refreshedThe issue where the page refresh causes an automatic logout typically occurs because the token is noEmmet Autocomplete for srcset atrributeSteps to reproduce: Position your cursor inside the " " for srcset & type a /. You cannot use autocoRelative color from currentcolorHello everyone, On MDN's relative color page (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_