This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 2 years ago.
If we style multiple divs with property display set to "inline-block" and one of them has a height longer than the others, all the smaller divs align at the bottom creating extra space at the top. But all I wanted is that the smaller divs align at the top and leave any extra space at the bottom. Is there any way I can achieve the required effect?
vertical-align: top for inline-block divs does that. vertical-align
.b{
display: block;
background-color: red;
}
.ib {
display: inline-block;
background-color: blue;
width: 50px;
vertical-align: top; /*this line*/
}
.d1 {
height: 100px;
}
.d2, .d3 {
height: 50px;
}
<div class="b">
<div class="ib d1"></div>
<div class="ib d2"></div>
<div class="ib d3"></div>
</div>
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 2 years ago.
I have a layout where I have a number next to a name and I want that layout to be centered in its container. It works fine if the name stays on one line, but if the name requires two lines then the entire flex element takes up the full width even though the broken lines visually don't take up the full space.
Notice how "Aaron Gray" stays on one line and the flexbox (yellow BG) remains centered in it's container (which is visually centered relative to the blue box on top of it, which is what I want)?
But notice how the "Peja Stojakowi" layout takes up the full width even though visually there's a lot of empty space on the right and consequently the num/name combo does not look centered relative to the blue box above it?
Here's the markup and css I'm using:
.LinkMap-playerWrap {
position: relative;
background-color: blue;
.LinkMap-playerWrapNameArea {
position: absolute;
bottom: -10px;
left: -20px;
right: -20px;
transform: translateY(100%);
display: flex;
justify-content: center;
background-color: pink;
.LinkMap-playerWrapNameAreaInner {
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
.LinkMap-playerWrapNum {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #000;
align-self: start;
height: 100%;
}
}
}
}
<div class="LinkMap-playerWrap">
<div class="LinkMap-playerWrapNameArea">
<div class="LinkMap-playerWrapNameAreaInner">
<div class="LinkMap-playerWrapNum">16</div>
<div class="LinkMap-playerWrapName">Peja Stojakowi</div>
</div>
</div>
<div class="Player" style="width: 90px; height: 90px;">
<div class="Player-innerWrap">
</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How can I vertically align elements in a div?
(28 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 3 years ago.
* {
margin: 0px;
}
.container {
background: #ccc;
line-height: 50px;
verticle-algn: middle;
clear: both;
}
.float {
overflow: hidden;
float: right;
}
<div class="container">
<button class="inside">inside</button>
<button class="float">float</button>
</div>
Please check this example.I want the .float element to be vertically centered of the .container element as the .inside element.But no matter I trigger BFC or add a pseudo element, I can not clear the impact of the float element.I don't think margin is a best way to solve this.Can you tell me how to fix it, thanks for your help.
Try this its work what you expected.
* {
margin: 0px;
}
.container{
display:flex;
justify-content: space-between;
background: #ccc;
line-height: 50px;
}
.float{
margin: 0 auto;
}
<div class="container">
<div class="inside"><button>inside</button></div>
<div class="float"><button>float</button></div>
</div>
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Generate scroll bar for overflow to the left
(5 answers)
Closed 5 years ago.
Consider the following example:
HTML
<div id="body">
<div id="container">
<div id="item-1"></div>
<div id="item-2"></div>
</div>
</div>
CSS
#body {
height: 500px;
width: 500px;
background-color: yellow;
overflow: scroll;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#item-1 {
background-color: red;
width: 200px;
height: 100px;
}
#item-2 {
background: linear-gradient(to right, black, white);
width: 1000px;
height: 100px;
}
see also https://jsfiddle.net/nfzo3xfj/5/
I have a flex container with two items as a centered column. These items can grow larger than the surrounding <div> element, so I want to use overflow: scroll to enable scrolling in that case. However, scrolling only works in one direction (to the right side). How can I enable scrolling towards the left (black) side of the second item as well?
This question already has answers here:
text-overflow: ellipsis not working in a nested flex container
(2 answers)
Closed 6 years ago.
Why isn't text overflow hidden inside two nested flexbox divs?
It works when it is inside one div.
In particular: why is the inner div larger than the outer div?
Browser: Chrome 52.0.2743.60
Here is a minimal code example:
<style>
.outer {
display: flex;
width: 500px;
border: 2px solid red;
}
.inner {
display: flex;
border: 2px solid blue;
}
.text {
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="outer">
<div class="inner">
<div class="text">
My overflow should be hidden but it's not aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
I believe it is something to do with your outer flex having a width, but the inner one does not, so this confuses the browser as to where the overflow is located. You can fix this by applying a width to your inner or text div like so:
.inner {
display: flex;
width: 100%; /* or 500px */
}
Another alternative is to move the overflow: hidden to your outer flex.
This question already has answers here:
Vertical-align image
(7 answers)
Closed 9 years ago.
I want to vertical-align and also horizontal align an image at the centre of a div. Currently my code only works with the horizontal-align and now I want to vertically align it as well. Can you please help me?
Here is my css code:
.centre
{
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
img
{
vertical-align: middle;
}
Just use display:table-cell; on .centre. Here's an example that shows it clearly, just change the selectors accordingly. http://jsfiddle.net/Y6NTf/
Another option is to set the img position to relative and the top and left to 50%. Here is a full working example.
HTML:
<div id="myDiv">
<img id="myImg" src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hat/arrow_black.png"></img>
</div>
CSS:
#myDiv {
height: 300px;
width: 300px;
background: grey;
}
#myImg {
position:relative;
top: 50%;
left: 50%;
}