This question already has answers here:
inline-block div with and without text not vertically aligned
(1 answer)
Align inline-block DIVs to top of container element
(5 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 4 years ago.
How to put these red boxes in line? One in the middle jumps down for no reason.
nav label {
width: 50px;
height: 50px;
display: inline-block;
background-color: red;
}
<nav>
<label></label>
<label>2</label>
<label></label>
</nav>
I need to preserve empty labels empty.
You need to set the vertical-align and change its default value of baseline, which is the reason behind the unwanted result, to e.g. top:
nav label {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: top; /* or "middle", "bottom" */
background-color: red;
}
<nav>
<label></label>
<label>2</label>
<label></label>
</nav>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I don't understand why there is a gap between the paragraph and the div element, below is my code. I am new to CSS.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
display: inline-block;
vertical-align: middle;
background-color: green;
}
<div class="center">
<p>I am vertically and horizontally centered.
</p>
</div>
Your paragraph has a margin-top by browser defaults. Set it to margin-top: 0; and there won't be gap.
This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 2 years ago.
i try toput diplay inline in relative positioned element heres the code
.parent{
height: 50px;
width: 130px;
background-color: red;
top: 100px;
position: relative;
display: inline;
}
but it just disappear
my question is why it do and what the relation between position and display
There is no connection between position and display. But, in your case. Change display: inline; to display: inline-block;, and the element will appear. Displayd inline element can ignore width and height and will be invisible without content.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Take a look at the example below:
.item {
padding: 16px;
height: 50px;
}
.first {
background-color: red;
display: inline-flex;
}
.second {
background-color: green;
display: inline-flex;
align-items: center;
}
<div>
<div class="item first">1</div>
<div class="item second">2</div>
</div>
I'd like to understand why setting align-items: center on the second box made the first one pushed downwards.
Disclaimer: I know how to fix this problem, I just wanted to get an explanation, like for a dummy, why does it behave like that because I struggle to understand this behaviour.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 4 years ago.
I am trying to center align a span inside a div, which also contains an img element.
.element {
display: inline-block;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
or see this fiddle
However the text wont vertical align. I have looked primary at this question. However vertical-align: middle does nothing here.
I also looked at this question. However I will rather avoid anything position: relative & position: absolute workarounds for this. I also tried messing the line-height with no luck.
I even tried to set height: 100%on the span, as this question suggests, but that does nothing either.
I basically looked at bunch of questions here on SO, it seems like css is so weird about this, that there basically is 12 approaches for a simple thing like this. Yet I can't seem to get 1 of them to work in my occasion.
What is up with this behavior?
EDIT:
Marked as duplicate to How to Vertical align elements in a div? - I have explained that these solutions with line-height and vertical align doesn't work in my case as explained in the original question. The accepted solution did not work in this case. How is it a duplicate?
The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!
.element {
align-items: center;
display: flex;
justify-content: flex-start;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
Use flexbox for this. Sample:
.element {
display: flex;
align-items: center;
}
Use align-items: center for vertical align and justify-content: center; if you need also horizontal align center.
This question already has answers here:
input / button elements not shrinking in a flex container
(7 answers)
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
Somewhy inputs do not perceive flex-basis correctly. Here is a simplest example illustrating how inputs do not obey and span outside of their parent block (see jsfiddle):
<div>
<input>
<input>
</div>
<style>
div { display: flex; width: 200px; border: 2px solid red; }
input { flex-basis: 50%; }
</style>
Here is another, more comprehensive, case.
What the hell? :)
The input elements has an instrinsic width - and width of flex items (along the flex axis) default to auto. Reset this using min-width: 0 - see demo below:
div {
display: flex;
width: 200px;
border: 2px solid red;
}
input {
flex-basis: 50%;
min-width: 0; /* ADDED */
}
<div>
<input>
<input>
</div>