This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 2 years ago.
I need horizontal center align an flexible width div element.
<div class="outer">
<div class="inner"> ...this content will grow or shrink while on items changed... </div>
</div>
.outer {
height: 500px;
position: relative;
background-color: gray;
}
.inner {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
border: 1px solid blue;
}
As you can see the div.inner is perfectly horizontal center aligned, but its max width will always be 50% of the div.outer while I hope the max width could be more when the content is grown.
And:
I don't want to give div.inner a fixed or min with, I hope it's flexible;
I know "max-width" does not work
Any suggestion will be appreciated!
Use a flexbox
.outer {
height: 500px;
background-color: gray;
display: flex;
justify-content: center;
}
.inner {
align-self: flex-end;
}
<div class="outer">
<div class="inner"> ...this content will grow or shrink while on items changed... </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>
I'm looking for a css-only solution to this problem. I have a parent and a child div. The parent has a minimum height. When the child div has a smaller height, I want it to be vertically centered in the parent. But when the child div expands past the parent's min-height, I want the parent to expand.
Illustrated in this image:
I can come close; position: relative on the child allows me to affect the parent height while still positioning the child, but I can't figure out how to determine the correct position (top: 50% plus transform: translateY won't work for me since the parent's height is not fixed).
This one has me stumped! Thanks in advance for any suggestions.
You can easily do this with flex:
.container {
min-height: 300px;
display: flex;
background: red;
justify-content: center; /* Center horizontally */
}
.container>div {
height: 200px;
width: 200px;
background: blue;
margin: auto; /* Center vertically */
}
<div class="container">
<div>some content</div>
</div>
With bigger content height:
.container {
min-height: 300px;
display: flex;
background: red;
justify-content: center;
}
.container>div {
height: 800px;
width: 200px;
background: blue;
margin: auto;
}
<div class="container">
<div>some content</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:
Align first div to left with subsequent divs aligned right
(3 answers)
Closed 6 years ago.
How could it be possible use Flex css to leave the elements as follows?
You can use margin-left: auto on second element and that will push second and third element to right.
.content {
display: flex;
}
.content > div {
width: 50px;
height: 50px;
border: 1px solid black;
}
.content > div:nth-child(2) {
margin-left: auto;
}
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
You could also achieve this with margin-right: auto on the first element. In this case the main horizontal align is flex-end and only the first div is flex-start. Because of that you can push the first div with margin-right: auto to the left and the others will keep the flex-end alignment. So every additional div will also be positioned to the right side.
#wrapper{
background: #eee;
display: flex;
justify-content: flex-end;
}
.box{
width: 100px;
height: 100px;
background: #000;
}
.box:nth-child(1){
background: rgba(0,255,0,0.3);
margin-right: auto;
}
.box:nth-child(2){
background: rgba(0,0,255,0.3);
}
.box:nth-child(3){
background: rgba(255,0,255,0.3);
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 6 years ago.
How do I vertically align a child element with the parent having a dynamic height.
CSS code:
parent{
height: 400px;
}
.child{
position:relative;
top:50%;
transform: translateY(-50%;);
}
This sets the child once, then doesn't change. How do I change it so that it changes with the dynamic height of the parent?
You can use display: flex.
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100px;
margin: 1em;
background-color: tomato;
}
.child {
width: 10px;
height: 10px;
background-color: yellow;
}
You can use `displa: flex`.
The following doesn't rely on parent's height.
<div class="parent">
<div class="child">
</div>
</div>