This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Why are these two inline-blocks not aligned? [duplicate]
(2 answers)
Vertically aligning relative inline block with non-relative inline blocks [duplicate]
(1 answer)
Display inline block text inside issue
(3 answers)
Closed 5 years ago.
My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.
HTML, CSS:
.container > div {
display: inline-block;
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
The problem is that the smallest line is aligned to the last line of the biggest div, as follows:
When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Found the solution, although i don't think it's the best way to do this:
.container > div {
vertical-align: top;
}
:)
You could add css property vertical-align: top, that way all content will start at the top of the div.
.container > div {
display: inline-block;
vertical-align:top
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.
I need the inside div to have a margin-top relative to the outside div and not the whole block.
I created an example in codepen. I have one div, two div and three div.
Notice that I put the margin-top in div three, but all divs receive the effect.
Does anyone know the reason?
<div class="um">
<div class="dois">
<div class="tres" style="margin-top: 50px;">
conteudo
</div>
</div>
</div>
example codepen
use padding-top instead of margin-top.
<div class="um">
<div class="dois">
<div class="tres" style="padding-top: 50px;">
conteudo
</div>
</div>
</div>
default value tag div is display:block, add css on um class display:flex
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 7 years ago.
I have 3 <img> elements in a div like this:
<div>
<img style="width: 10%;">
<img style="width: 80%;">
<img style="width: 10%;">
</div>
but the last image goes to next line. the box-sizing property of the div is border-box.
what is the problem?
Images and other inline elements are affected by whitespace in the html. This example shows your html with whitespace removed. http://jsbin.com/qoxedepifi/1/edit?html,css,output. You could set the display: inline-block; float:left which will ignore white-space. Or you could set the property white-space-collapse: discard; on the parent element.
img{float:left;}
Your can add float left on the images.
This question already has answers here:
White space at bottom of anchor tag
(5 answers)
Closed 9 years ago.
Problem image:
Well, how can you see, there's a border, that blue line below the black image, I need to remove it, but I can't, I don't know how to do it. I need some solutions.
<div align="center" style="background-color:#00F;">
<img src="images/topimage.png">
</div>
<div>
<img src="images/topimage bottomborder.png" style="width:100%;height:9px;">
</div>
Above's the code.
Images are by default inline elements, so there, again by default, is space between the bottom edge of an image and the bottom edge of its container.
img {
display: block
}
Alternatively, this should also work:
img {
vertical-align: top
}
Us an appropriate selector.
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 9 years ago.
I have three inline-block divs like this:
<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>
I added a padding to the second div to display it a little lower, but this makes others divs to go down as well. How to make only the second div to display lower?
Here is a JSFiddle: http://jsfiddle.net/mY6hP/
The same thing was asked here, but the accepted answer suggests using absolute positioning, which i would not like to do.
Change the alignment on the other divs so they allign themselves at the top (via vertical-align:top;):
<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>
Try float:left instead of inline-block display:
<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
center div vertically in a % height div?
I am trying to use the solution here: center div vertically in a % height div?
however I want the header to be at the top of the div and that solution puts the header centered with the select...
What I want is the header to remain at the top, and the select to be vertically and horizontally centered and the total height of the outside div to be 100px.
What I tried is on the fiddle below...
jfiddle: http://jsfiddle.net/kralco626/K8wWa/1/
Using the partial solution in the comments :
Look at this jsFiddle
To have horizontal align, you'll have to put your display:table-cell div in a display:table div.
since we can't trust jsFiddle to always be around, here's the result:
<div id="d1">
<h3>header</h3>
<div id="table">
<div id="d2">
<select><option>Status</option></select>
</div>
</div>
</div>
Css
div#d1 {height:100px;width:100%;border:2px solid black}
div#table {display:table; width:100%;text-align:center}
div#d2 {
display:table-cell;
vertical-align:middle;
height:80px;
}
h3{background:red;text-align:center}