I tried to vertically center an inline-block like this:
div {
width: 50px;
height: 50px;
background: red;
line-height: 50px;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: white;
}
<div>
<span></span>
</div>
But the span is not vertically centered. Why?
Because line-height sets the position of the baseline of your text (the bottom end of your span). Since your span is 20px high you must add half of that to line-height:
div {
width: 50px;
height: 50px;
background: red;
line-height: 60px;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: white;
}
<div>
<span></span>
</div>
Related
So I'm questioning myself why the div with the class champ_info isn't placed next to the image because the image is an inline-block element. So the Text in my div element lies under the image instead of next to the image. My code is below.
.champ_info {
background: #0b2e33;
color: white;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
Thank you in advance.
I personally find making inherently block level elements inline counter intuitive. Flex box is the perfect solution to your problem.
.champ_container {
width: 40%;
margin: 0 auto;
display: flex;
/* justify-content: center; */
align-items: center;
background: #10474e;
}
.champ_info {
background: #0b2e33;
color: white;
width: 100%;
height: 100%;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
<div> is a block element, which means it takes up the whole line. Put display: inline; inside the css for the <div> and it places it next to the image like you wanted.
Add vertical-align: top; if you want the text to align to the top. Since the image and the text align to the bottom of the parent, you need to manually set them to align to the top.
.champ_info {
background: #0b2e33;
color: white;
display: inline;
vertical-align: top;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
I have the following HTML/CSS code:
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
image
https://jsfiddle.net/e82gzayt/2/
How to get the inline-block having the same height as its parent?
or
How to get the font to be centered vertically with the span block?
You should add that text inside span to be inline. Also, in second case you are restricting the height of p element to be 1 em.
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
}
<p><span>Ay</span></p>
<p id="h"><span>Ay</span></p>
Check the first element. It is aligned fine now.
Fiddle - https://jsfiddle.net/e82gzayt/3/
EDIT: Removing the height and width restriction of span the text fits well inside the p block.
Demo : https://jsfiddle.net/e82gzayt/4/
You could do this with display: table-cell; and vertical-align: middle; and then wrap the two <p> tags in a <div> like this:
p#h { height: 2em; }
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
.vertical-center {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 2em;
background-color: #dddddd;
width: 400px;
}
<div class="vertical-center">
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
</div>
You can use flex value to center vertically. Advanced css class.
Try this
p { display:flex;align-items:center;background: lightgray; height: 2em;}
p#h { display:flex;align-items:center;height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
Or you can try with flex box
p { background: lightgray;
display:flex;
align-items: center;
}
p#h { height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
https://jsfiddle.net/e82gzayt/5/
In this style of using line-height and inline-block, why is the green item a few pixels below the middle? Shouldn't there be exactly 15px above and below?
.container{
height: 45px;
line-height: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 15px;
background-color: green;
vertical-align: middle;
display: inline-block
}
<div class="container">
<div class="item">
</div>
</div>
I know there are other ways of vertically aligning items (including JS, absolute positions, and many more). I'm not trying to solve the general "how to vertically align a div".
The culprit here is not so much the line-height, but rather the vertical-align: middle. It tries to align your box with the text that may hypothetically be inside the parent box. Where the inner box ends up depends on the font-size of that text. You can push the box further down by increasing the font-size of its parent:
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
As you can see, the text is closer to the bottom of its container than to the top (the "j" overflows the container while the "b" does not).
In the same way, you can move the box closer to the center by decreasing the font-size. Since you asked in comments, here's how you get it optimally centered with this method: Set font-size to 0 on the container.
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 0px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
Changes in your style may help you
.container {
background-color: #ff0000;
display: table-cell;
height: 45px;
vertical-align: middle;
}
.item {
background-color: #008000;
display: table-cell;
height: 15px;
vertical-align: middle;
width: 15px;
}
Please use dividable size to make this work. Also remove vertical align attribue
https://jsfiddle.net/guc6uxc7/
.container{
height: 42px;
line-height: 42px;
background-color: red;
display: inline-block
}
.item{
height: 12px;
width: 12px;
background-color: green;
display: inline-block;
}
I have two inline-block divs, each 50% width of its parent, and they are correctly shown next to each other. But, when I add a link to one of those divs, there's a gap on top of the second div
<div class="wrap">
<div class="resizable resizable1">
link1
link2
</div><!--
--><div class="resizable resizable2">second</div>
</div>
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
}
.resizable2 {
background-color: lightblue;
}
.resizable a {
font-size: 12px;
}
Jsfiddle example http://jsfiddle.net/KyEr3/455/
How can align the two divs?
When using display: inline-block elements by default are set to baseline, instead set vertical-align: top
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
vertical-align: top;
}
FIDDLE
You can also float them both left, they will align next to each other in the wrapper.
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
float:left;
}
.resizable2 {
background-color: lightblue;
float:left;
}
.resizable a {
font-size: 12px;
}
Hi I'm trying to center the text in the first circle div. I think it's currently in the center of the div but when there is more than one characters like '200', it looks funky as below. I have the red circle background and trying to make the text in the center regardless of the characters. thank you in advance!
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 10px;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>
Try to set width:100% on .bg .label as follows:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
EDIT: if you want to keep the same width for the circle and still center the text, you could replace width:10px; in .bg with the following:
.bg {
/* ... */
width: 35px;
padding: 10px 0;
text-align: center;
/* ... */
}
So the full snippet would look something like this:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
width: 35px;
padding: 10px 0;
text-align: center;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
Try something like this. I'm guessing you are ok with fixing the width and height of your little circles? If so, this solution should work for you. The benefit here is your circles stay consistent visually regardless of the values placed within them.
You can adjust the width/height of the circle to your liking, and whatever value you place in there will remain centered. Keep in mind, with this solution, your circles won't scale to match the value's length should it expand beyond their bounds. I assume this is the behavior you're looking for, though, given your original code.
Also, note, you might need to adjust the top margin to position the values according to the height of the circles if you change them. Hope this helps!
.bg {
background: red;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;
width: 38px;
height: 38px;
}
.bg .label {
display: inline-block;
margin: 9px auto 0;
text-align: center;
width: 38px;
}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>