This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Vertical-align aligns everything else except self
(2 answers)
Why does the sibling line-box gets aligned vertically whenever there is no space for the first line-box to be vertically aligned?
(2 answers)
Closed 10 months ago.
I've been testing vertical-align a lot but there is one basic behavior that I dont understand:
HTML & CSS
#container {
margin:0;
padding:0;
width:80%;
height:250px;
background-color: bisque;
border: solid blue 1px;
}
#inside_div {
display: inline-block;
background-color: red;
width:90px;
height:200px;
height:120px;
outline:solid black 1px;
font-size: 36px;
vertical-align: bottom;
}
#inside_span {
font-size:22px;
outline:solid black 1px;
}
<div id="container">
<div id="inside_div">A</div>
<span id="inside_span">A</span>
</div>
Why the hell is the span at the bottom ?
The only vertical-align assigment I did is on the red div...
The box line is as tall as the div so :
The inside_div is aligned to the bottom of the box line (the box line is as tall as the inside_div) as specified by the CSS inside_div{vertical-align:bottom;}. That is fine.
Why is the span aligned to the bottom of the inside_div? I didn't "ask" him to do that... Why isn't just sitting at the top of the container witch would be the normal flow ?
If I change the CSS rule to inside_div{vertical-align:top;} the inside_span sits next to the inside_div but both tops are aligned. Why does the inside_span even "cares" about what is going on with the inside_div? There is no baseline involved because the inside_div is aligned to the top of the box line (witch is as tall as him). So what is the inside_span aligning to and why?
If there is no vertical-align rule for the inside_span, by default the value of it's vertical-align is baseline. But what is his baseline aligned to?
Hope I'm being clear...
This question already has answers here:
CSS Width / Max-Width on Line Wrap?
(3 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 years ago.
I have some text inside a div.
The parent of the div that holds the text has a specific width and display: flex;
I want the width of the container that holds the text to be as wide as its longest textline (in the fiddle this would be the line "WordyWords in").
I know this can be done by: display: inline, but this only works, when the parent does not have display: flex anymore.
.width{
width: 150px;
display: flex;
}
.text{
font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}
.width2{
width: 150px;
}
.text2{
font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}
This is what I have
<div class="width">
<div class="text">Veryvery long WordyWords in here</div>
</div>
<br>
This is kind of what I want, but I want to keep the <span style="background-color: #f2f2f2">display: flex;</span> attribute in the parent
<div class="width2">
<div class="text2">Veryvery long WordyWords in here</div>
</div>
Like shown in the picture, I would like the div .text to end right after the letter of the longest textline like display: inline does this. (The red line is where the .text div should end.) But I want to keep display: flex property on my parent. Is this even possible with flex set on the parent?
This question already has answers here:
Why my inline-block divs are not aligned when only one of them has text? [duplicate]
(4 answers)
Why does this inline-block element have content that is not vertically aligned
(4 answers)
My inline-block elements are not lining up properly
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Understand inline-element, vertical-align, line-box and line-height
(1 answer)
Closed 4 years ago.
This might sound like an outdated topic since no one still uses inline-block property thanks to flex-box and grid but I was wondering about it and I would like to inquire about it.
When creating two divs and assigning them both to display as inline-block and then adding any element inside one of them, the result is quite strange, where the div which contains that element will slide down to the bottom of the other div minus the height of the added element.
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
<div id="left">
<span>Text</span>
</div>
<div id="right"></div>
To fix the issue it's only enough to align the div vertically to the top, but what is strange too is that we get the same result even if we align the other div which is not affected without aligning the affected one, so what exactly is happening here?
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
#left{
vertical-align: baseline;
}
#right{
vertical-align: top;
}
<div id="left">
<span>text</span>
</div>
<div id="right"></div>
UPDATE:
To clarify things more I removed the child element and added a text outside the two divs, and added two more divs, now all divs are without a flow content, but the first two both of them have a top property while the last two are different, one top and the other is baseline:
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
.right{
vertical-align:baseline;
}
.left{
vertical-align:top;
}
Text
<div class="right"></div>
<div class="left"></div>
<br>
Text
<div class="left"></div>
<div class="left"></div>
In the first case the Text aligned to the top and in the next aligned to the baseline of the divs even they don't have a flow content.
The reason this happens, is because the default vertical-align value for inline elements is baseline.
Then the question becomes: what is the baseline of an inline-block element? Here, we have to make a distinction between elements with and without flow content:
For elements with flow content, such as the left div in your question, the baseline is the same as the baseline of the last content element.(*) For the left div, this corresponds to the baseline of the inner span.
(*) There are some additional considerations when setting the element's overflow, but I'll leave that out of scope.
For elements without flow content, such as the right div in your question, the baseline is the bottom of the element's margin box. For the right div, this corresponds to the bottom of the div itself.
So, to summarize: the reason you're seeing a vertical shift is because the elements are vertically aligned according to their baseline, and the baselines for elements with and without content are calculated differently.
To test this out, just try adding some text to the right div, and you'll see how both baselines are now the same.
div {
display: inline-block;
width: 100px;
height: 100px;
background: gray;
}
<div id="left">Text</div>
<div id="right">Other text</div>
By animating the font size, the example below demonstrates even more clearly how changes in the baseline affect vertical positioning:
div {
display: inline-block;
width: 100px;
height: 100px;
background: gray;
}
#left {
transition: all 2s ease;
animation: anim 2s infinite linear alternate;
}
#keyframes anim {
0% {font-size: 100%;}
100% {font-size: 300%;}
}
<div id="left">Text</div>
<div id="right"></div>
The display: inline-block Value
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
and
excuse me textarea is inline-block, but what line is correct,
the browser think the bottom of second inline-block is position of line so
when he go to draw children he see the textarea must be inline and change position of it to the bottom of second inline-block is position of line and because it is any padding and it position are relative it cause to parent div move to bottom just for textarea be inline
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Place input box at the center of div
(5 answers)
Closed 5 years ago.
I have attempted multiple times, with multiple different possible solutions from around Stack Overflow to accomplish this task, yet frustratingly, I cannot seem to be able to center the input box in the div.
My code essentially looks like this at the moment:
div {
width: 100vw;
position: relative
}
h1 {
text-align: center;
}
<div>
<h1>Title</h1>
<input type='text'>
</div>
As of the moment, the word "Title" is centered on the screen, but the input box is still on the left hand side.
Is there any way to be able to center the horizontally in the div?
Apply flexbox to the container div.
Note: centring the h1 becomes unnecessary after applying flex
div {
width: 100vw;
position: relative;
display: flex;
flex-flow: column wrap;
align-items: center;
}
<div>
<h1>Title</h1>
<input type='text'>
</div>
Try this:
input[type="text"] {
display: block;
margin : 0 auto;
}
Example: Demo
Display block. input elements are inline.
<input type='text' style="display:block; margin : 0 auto;">
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some divs lined up horizontally and the content in the div is pushing it out of line with the others. How can I make them line up regardless the amount of content? I intend to add overflow:hidden so large content will not destroy the layout. No javascript involved. Needs to work in IE9+ and chrome.
MARKUP
<div class="panels">1</div>
<div class="panels">2</div>
<div class="panels"><img src='\images\img.png' height='64px'></div>
<div class="panels">4</div>
CSS
.panels {
/*line-height:200px; */
display: inline-block;
width:22%;
height: 200px;
margin:5px;
border: 1px solid blue;
}
I have a fiddle
Another saturday stolen by work. :(
Use vertical-align: top on .panels.
http://jsfiddle.net/y9pEV/2/