How do I align text to middle within line-height - css

I wanted to put a large character to center alignment in both vertical and horizontal. here are my styles and result
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
margin: 150px auto;
text-align: center;
line-height: 300px;
}
span {
display: inline-block;
background-color: burlywood;
line-height: 0.5;
vertical-align: middle;
font-size: 300px;
}
<div><span>s</span></div>
here is the result
How can I put the 's' in the middle?


It looks like the css difference is with lower case letters:
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
background-color: burlywood;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 50%;
height: 50%;
font-size: 10em;
}
<div><span>S</span></div>
<div><span>s</span></div>
<div><span>M</span></div>
<div><span>m</span></div>

Related

How do I limit characters and then unlimit then on hover using css scale?

So, I have a roundish card that my client don't want to get rid off, but the dynamic text will always be larger than the card itself. I have to limit the characters at first and then show the full text on hover and he want's me to zoom in the card so it can be larger to fit the text. How do I do that? I've been trying scale and width with ch, but on hover I cannot change the width since it only zooms in.
I'm using Angular 9, Typescript and Scss.
.model-list {
display: flex;
width: 65rem;
height: 55vh;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow-y: scroll;
scrollbar-width: none;
.model-card {
display: flex;
flex-direction: row;
align-items: center;
margin: 10px 20px;
padding: 10px;
width: 16rem;
height: 5rem;
border-radius: 50px;
-webkit-box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
cursor: pointer;
.text {
width: 13rem;
display: flex;
flex-direction: column;
padding: 16px;
.name {
font-size: 15px;
font-weight: bold;
color: #626c75;
margin: 0px;
width: 100%;
}
.description {
display: flex;
flex-direction: row;
font-size: 14px;
color: #dce1e7;
margin: 0px;
width: 17ch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.icon-container {
width: 5rem;
height: 5rem;
img {
width: 100%;
height: 100%;
}
}
&:hover,
&.active {
transform: scale(1.2);
.name,
.description {
width: 60ch;
color: white;
}
}
}
}

how to make nested div with CSS only

Given the follow html and css, how to make the nested box like the
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>

draw them using background:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background:
/* color position / width height*/
linear-gradient(red 0 0) left 20px top 20px/50px 50px,
linear-gradient(green 0 0) right 30px top 20px/50px 50px,
linear-gradient(blue 0 0) left 40px bottom 40px/50px 50px;
background-repeat:no-repeat;
}
<div class='parent'></div>

You can use the before or after pseudo element in CSS to achieve what you're looking for without altering the HTML at all. Take a look:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.parent::before {
content: "";
width: 100px;
height: 100px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>

How do i add some space between three buttons and place in the centre of the screen CSS

Hi so im trying to make a Rock Paper Scissors game however the three buttons are too close together so i need to add some spacing. Also i want the buttons in the centre of the screen but not affect the header.
body {
background-color: black;
display: block;
justify-content: center;
align-self: center;
min-height: 100vh;
font-family: consolas;
color: white;
text-transform: uppercase;
}
header {
text-align: center;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
#btn {
width: 150px;
height: 150px;
border-radius: 50%;
border: none;
background-color: darkgray;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(0, 0, 0, 0.3)));
}

Can you not add more spacing by increasing the margin?:
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
Or if you only want horizontal spacing:
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
margin-left: 20px;
margin-right: 20px;
}

Setting 100% on a child of body overflows the page

This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.

I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}

Why vertically centering needs a specified body height but not width?

I'm trying to vertically center a div using only display flex. I know how to do this with other methods, but need some insight on why this does not work. (The container do get horisontally centered but, not vertically)....
<body>
<div class="container"></div>
</body>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center; //works fine
align-items: center; //
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
}

Yes, it gets centered, as you can see here:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px green;
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
border: solid 1px red;
}
<div class="container"></div>
But probably what you want is this
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px green;
height: 100%;
}
html {
height: 100%;
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
border: solid 1px red;
}
<div class="container"></div>

Resources