This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
.d1 {
height: 10px;
}
.dd {
display: inline-block;
overflow: hidden;
}
.dd1 {
display: inline-block;
}
<div class="d1">
<div class="dd"></div>
<div class="dd1"></div>
</div>
unset the overflow the dd and dd1 is in same line. but if set the two divs not has an equal height.
If you take a look at the spec, you may read:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So what we know as the "baseline" is actually different for inline elements that have an overflow that is something other than visible.
To have them to visually appear inline, I believe you'll need to explicitely style the vertical-align property:
.d1{
height:10px;
}
.dd{
display:inline-block;
vertical-align: bottom;
overflow:hidden;
}
.dd1{
display:inline-block;
vertical-align: bottom;
}
Try this
.d1 {
display: flex;
align-items: center;
}
.dd {
overflow: hidden;
}
Related
I wrote CSS with vertical-align applied to one of these boxes.
Then, vertical-align, which is specified for only one side, is applied to the other element.
.a {
height: 75px;
width: 75px;
background-color: red;
}
.a,
.b {
display: inline-block;
}
.a {
vertical-align: middle; /* vertical-align applied to .a also affects .b */
}
<div class="a"></div>
<div class="b">
<p>texttttt</p>
</div>
Why does setting the vertical-align on one side affect the other side?
vertical align for inline elements works for aligning inline elements based on each other as your example says a will be centered in the middle with the element b not based to their parents height.
if you want to align b vertically based on a position you have to add a vertical align property to b
.b{
vertical-align: top;
}
for a side note to see a proper results and understand it better you should reset the default margins on the p tag
p{
margin:0;
}
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.
On this code sample,
When I delete the padding on the element with an id of #a, the blue element moves up, and vice versa.
But when I inspect the margins and padding in the Chrome dev tools, it looks like they shouldn't affect each other at all!
Why is the padding of the red element affecting the VERTICAL positioning of the blue element?
I understand why it would affect the horizontal, but the vertical change confuses me!
I've looked into the CSS box model, but it hasn't helped.
* {
font-size: 20px;
}
#a {
background-color: red;
display: inline-block;
box-sizing: border-box;
height: 100px;
width: 150px;
padding: 30px;
}
#b {
background-color: blue;
display: inline-block;
}
<div id="a">
CONTENT
</div>
<div id='b'>
CONTENT
</div>
I expect that changing the padding of the red el wouldn't affect the positioning of the blue el at all!
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
CSS ellipsis inside flex item
(1 answer)
Closed 4 years ago.
I am trying to hide overflow in a label that is the child of a deeply nested flex-container. Below are two simple snippets to illustrate the problem:
Single container (works):
#parent-flexbox {
display: flex;
width: 200px;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
Nested container (doesn't work):
#parent-flexbox {
width: 200px;
}
#parent-flexbox, #child-flexbox {
display: flex;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<div id="child-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
</div>
To solve this I could add an explicit width like max-width: 100% to every container in the hierarchy. This is a terrible solution that I'm hoping is unnecessary! My current best fitting solution, but not much better, is these two rules for the immediate parent of the label: {position: absolute; max-width: 100%}. I want to avoid using absolute position because this comes with problems of its own. This JSFiddle shows the absolute position solution (lines outcommented default).
How can I achieve the same as this JSFiddle without A) using position: absolute and B) targetting all containers in the hierachy to give them max-width: 100% or min-width: 0?
The issue here is that the nested container is overflowing the first container and that's why overflow hidden is not working as you expect since there is no overflow with label.
I added border so you can better see:
#parent-flexbox {
width: 200px;
}
#parent-flexbox, #child-flexbox {
display: flex;
border:1px solid green;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<div id="child-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
</div>
To avoid this you may apply overflow:hidden to the containers:
#parent-flexbox {
width: 200px;
}
#parent-flexbox, #child-flexbox {
display: flex;
overflow: hidden;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<div id="child-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
</div>
I don't think you can fix this without targeting the containers. And since your are applying display:flex to all of them, you can add another property with it.
I have a weird behaviour of an inline-flex element when applying a clearfix to it. When I set a clearfix to an element which has an inline-flex display property the strange white space appears before it:
But when the inline-block is used the behaviour is different:
I don't understand why inline-flex has a different behaviour than inline-block.. and why it has that weird space.
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-flex;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
JSFiddle Demo
Try set a vertical-align: top to your inline-flex | inline-block element to fix this offset.
https://jsfiddle.net/jeca65my/2/
Thank's to #NenadVracar on this solution
display: inline-flex
When you use display: inline-flex, you establish a flex container.
An initial setting of a flex container is flex-direction: row.
This means that all in-flow child elements of the container (including in-flow pseudo-elements) will line up in a row. The display value of these children (table, in this case) is overridden/ignored, in accordance with the rules of a flex formatting context.
Your flex container has two flex items (the pseudo-elements) in one line:
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-flex;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: "x";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
display: inline-block
When you use display: inline-block, you establish a block formatting context.
The display property of child elements is respected.
Your pseudo-elements with display: table are block elements which, by default, occupy the full available width. Hence, the pseudos are creating two rows:
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-block;
height: 20px;
width: 20px;
}
.cf:before,
.cf:after {
content: "x";
display: table;
}
.cf:after {
clear: both;
}
<div class="a">
<div class="b cf"></div>
</div>
vertical-align: baseline
Because both versions of your code use inline-level display values, this calls into play the vertical-align property, who's initial value is baseline.
The white space you are seeing below div.b when set to display: inline-flex is due to baseline alignment.
The white space you are seeing below div.b when set to display: inline-block is due to baseline alignment in combination with the effects of two block element children.
Here is a more detailed explanation:: https://stackoverflow.com/a/36975280/3597276
The clear property
.cf:after {
clear: both;
}
Your clearfix method is not the source of any of the white space. In fact, it's having no effect on your layout and can be safely removed.
You use the clear property only when dealing with floats.
From the spec:
9.5.2 Controlling flow next to floats: the clear
property
This property indicates which sides of an element's box(es) may not be
adjacent to an earlier floating box.
Not only are there no floated elements in your layout, but if there were, the float and clear properties are nonetheless ignored in a flex formatting context.
3. Flex Containers: the flex and inline-flex display
values
float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.
You have to imagine your page as a flow. Every element of your page is in the flow (DOM). You are using the position property to change the position in the flow.
block
A block element will Always start a new line. (ie: div)
inline-block
Inline blocks elements are blocks like div but with inline properties in it. (ie: span)
inline-flex
This is used the same way as inline-block in the flow. It makes a container that is inline but with the flex layout.
For your example, an interesting thing to do in order to focus on the difference between inline-block and inline-flex is to add text in your child div. You'll see that the comportment of your child div will once again change because it has text in it. JSFiddle example
EDIT : I found a sentence on SO that resumes well the situation. thank's to #BoltClock on This post :
display: inline-flex does not make flex items display inline. It makes the flex container display inline.
This question already has answers here:
How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
(36 answers)
Centering image horizontally and vertically [duplicate]
(5 answers)
Closed 9 years ago.
I am trying to horizontally center a large image. Because I am using HTML5, I can't use <center>. I could use left:400px, but that wouldn't work for different screen sizes.
Wrap the image inside an element and use text-align: center;...
Demo
<div class="center">
<img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" />
</div>
.center {
text-align: center;
}
Alternatively if you are aware, that what's the image width, you can also use margin: auto; with display: block; as img tag is inline element by default and of course, the width property
img {
width: 276px;
display: block;
margin: auto;
}
Demo 2
Try this css to horizontally center
display: block;
margin: 0 auto;
= the top and bottom margin 0, and the left and right margin auto
Use CSS text-align: center;. And don't forget to set width on the div or it will look left-aligned.
<div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>
Depending on your specific situation, this has worked for me on several projects:
<style>
.outer{float: left; position: relative; left: 50%;}
.inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
<div class="inner">content you want to center, image, text, whatevs</div>
</div>
The IMG element is inline, by default. So, as the others have pointed, you have two options:
1) Keep it inline, and use text-align: center;.
2) Make it a block element with display: block;, and then use margin: auto;, which works only on block elements. I think this solution is better. Setting the width is just another way to force it to be a block element, but it's less obvious for someone that may read the code later. So explicitly setting the display type to block is better for readability.
If your element has the width property , then give it margin:auto;.