So I want the inner divs outside the outer div to wrap according to the width of the outer div, which in turn expands and contracts according to the width of the browser window. I know that I can use display: inline-block; to make the divs wrap around each other but when they do that the divs don't get centered horizontally. text-align: center; and assigning display: flex; + justify-content: center; doesn't work.
Maybe you just need to add flex-wrap: wrap; to the container so the inner divs start wrapping.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
Here is a working demo.
html:
<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>
css:
div.LabelColumn
{
padding: 10px;
width: 150px;
float: left;
margin:10px;
border:1px solid #333;
}
div.DataColumn
{
padding: 10px;
width: 150px;
float: left;
margin:10px;
border:1px solid #333;
}
here you can see one example, I think it will help you.
Related
I have a problem with positioning a text inside its container.
I want to keep it exactly in the middle, so both justifying and aligning.
So I would like it to look like so:
What I do is:
<div className="view-container">
<div className="view-icon-container">
<img className="view-icon" width={icon.size} height={icon.size} src={icon.src} />
</div>
<div className="view-text-container">
<p className="view-text">Text</p>
</div>
</div>
with the following styling:
.view-container {
padding: 5px;
height: 50px;
width: 250px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border:1px solid black;
}
.view-icon {
position: absolute;
border:1px solid black;
}
.view-text {
width: 100px;
font-size: 16px;
text-align: center;
margin-top: 7px;
position: absolute;
align-content: center;
align-self: center;
align-items: center;
border:1px solid black;
}
.view-text-container {
height: 50px;
width: 150px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border:1px solid black;
}
.view-icon-container {
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
border:1px solid black;
}
Notice please the 7px margin-top applied to the view-text. My issue is that without it, the text goes to the top a bit, so it looks like so:
My question is: What is causing this margin, or padding to appear? Where does it hide in my CSS?
I think the issue is using the p tag. replace it with a div. Most tags have predefined defaults. You have probably not cancelled some of them when you are using the paragraph.
If you right-click on the page and select Inspect. Select the p element. On the right-hand side you will see your attributes and the browser's defaults. This may or may not be the HTML Specification defaults. And these may change over time.
However, if you are working on margins etc, then you could start off by specifying
margin:0
padding:0
I've got some problems with specific element positioning. Could you give me any advice how to make it works?
It seems that buttons should be a part of content div but I don't really know how to do this. I tried many ideas but without any result.
Thanks in advance :)
My current code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<div class="item" style="background-color: red; height: 65px;">
<button>test</button>
</div>
<div class="item"></div>
</div>
I have no clue how to set div with buttons to be above header div. I tried with position relative but without success.
I know that it can be achieved by setting maring-top in container div. But is there any more elegant solution?
Well if you wanted to make a template as you mentioned above in the attached picture, I would say you won't need to define a new div above your container as the independent div and you should wrap all your header items into one division and make them flex with related justify-content and align-items, the flexbox with reacting to this as two different items that two of them (first button and header item) are wrapped into one div and the other one is a simple button (you can wrap it into another div too if you wanted) then with the justify-content: space-between they will force to the two endpoints of the division with space between them. Then you should do the same with your first wrapped items in div but in this one, you should add specific width to the division to make the justify-content: space-between work properly.
I add the simple code snippet below for more illustration, you can use it freely.
.header {
background-color: red;
padding: 10px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header button {
background-color: yellow;
font-weight: bold;
border: none;
}
.header span {
color: white;
}
.header-left {
width: 130px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
max-width: 100%;
}
.item {
width: 200px
min-height: 400px;
margin: 0 40px;
padding: 100px;
background-color: lightgrey;
}
.item > p {
text-align: center;
}
<div class="header">
<div class="header-left">
<button>btn</button>
<span>header</span>
</div>
<button>btn</button>
</div>
<div class="container">
<div class="item">
<p>content</p>
</div>
</div>
If I am not getting it wrong, then you want the code of the button to be inside of container and on web page it should be shown on header. If this is what you are looking for then you can try the below code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: relative
}
.container button {
position: absolute;
top: -30px; // you can change it accordingly
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<button>test</button>
<div class="item"></div>
</div>
I'm trying to align three div blocks vertically using flexbox.
I can get them horizontally aligned correctly, however not vertically.
What am I doing wrong?
.banner {
padding-top: 10px;
padding-bottom: 10px;
background-color: #01b9d5;
color: white;
height: 55px;
}
.banner-align {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid green;
}
.banner-hero {
flex: 1;
align-self: center;
max-width: 50%;
border: 1px solid red;
text-align: center;
display: inline-block;
}
.banner-left {
align-self: flex-start;
flex: 1;
border: 1px solid green;
display: inline-block;
}
.banner-right {
align-self: flex-end;
flex: 1;
text-align: right;
border: 1px solid yellow;
display: inline-block;
}
<div class="banner">
<div class="container banner-align">
<div class="banner-left">
Left Block
</div>
<div class="banner-hero">
<b>Title</b>
</div>
<div class="banner-right">
Right block
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/zqc1qfk1/1/
You are missing the flex-direction:column attribute of flex.
By default any flex container has a flex-direction: row & that is the reason its moving horizontally & not vertically. You need to specify this explicitly.
Here is more about it
.banner-align {
display: flex;
align-items: center;
justify-content: center;
border:1px solid green;
flex-direction: column;
}
Updated the Fiddle.
Simply enable wrap on the container and give each flex item a width: 100%:
.banner-align {
display: flex;
flex-wrap: wrap;
}
.banner-align > * {
flex: 0 0 100%;
}
Now each flex item consumes all the space in the row, forcing other elements to create new rows.
revised fiddle
align-items: center on your flex parent centers everything vertically. However, using align-self: [anything but center] on the children overrides this.
Edit:
oops, as someone else pointed out, you're not getting the align-self effect in the original fiddle because the parent's height wasn't set and so it was only as tall as it needed to be to contain the children. If the children hadn't all been the same height, you would've seen them staggered.
If you're trying to have them all centered, you can get rid of the align-self properties and let the one align-items: center on the parent do that work. If you wanted them staggered, you don't need the one align-items: center on the parent.
I have the following HTML
<div class="parent">
<div class="left-colum">Some paragraphs of text</div>
<div class="right-column"><img src="image.jpg"></div>
</div>
The right-column has the width of the image, but since it holds different size images its width is unknown. I want the left-column to take whatever is needed but with a max-width of 150px. I also want the image in the right-column centered vertically.
In the end it should look like the example below, but I have a hard time time getting this together. How would I do this?
edit: I have the following CSS, but the right-column isn't at 100% height so I can't start trying to vertically center the image yet:
.parent{
position: relative;
height: 100%;
}
.left-colum{
float: left;
max-width: 150px;
}
.right-column{
float: right;
height: 100%;
}
You could use nested flexbox see the comments inline.
body {
margin: 0;
}
.parent {
display: flex;
height: 100vh; /*viewport height*/
}
.left-column {
background: pink;
max-width: 150px;
}
.right-column {
background: gold;
flex: 1; /*expand*/
display: flex;
justify-content: center; /*center x*/
align-items: center; /*center y*/
}
<div class="parent">
<div class="left-column">Some paragraphs of text</div>
<div class="right-column">
<img src="//dummyimage.com/100">
</div>
</div>
Use flex display on columns and set display:flex; align-items:center; justify-content: center on right div and max-width: 150px; on left div. Also be aware of vendor prefixes for browsers in order to properly use flex property.
.parent {
display: flex;
align-items: center;
justify-content: space-between;
}
.left-column {
max-width: 150px;
display: flex;
}
.right-column {
display: flex;
justify-content: center;
align-items: center;
display:center;
}
I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.
Example
HTML:
<div class="inner">
<div class="section green">
<img src="http://i.imgur.com/hEOMgVf.png">
</div>
<div class="section red">
<img src="http://i.imgur.com/nEybO1g.png">
</div>
</div>
CSS:
.inner {
float: left;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
}
.section {
float: left;
flex: 1;
}
.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }
My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?
Here's a simplified JSFiddle of what I have:
http://jsfiddle.net/beK28/1/
To achieve the effect you want, you shouldn't try to do any of the alignment in the container element and instead should set .section to also be display:flex. Then you can justify and center the images correctly within the children elements.
.section {
align-items: center;
display: flex;
flex: 1;
justify-content:center;
text-align: center;
}
http://jsfiddle.net/beK28/8/
You also don't need to use float, that's the whole point of using flexible containers.
Your elements aren't stretching vertically anymore because you've set align-items: center. If you want them to be equal height, it has to be the default value of stretch. If your elements were multi-line, then you could use align-content: center instead, which will give you the effect you're looking for. For single-line flex items, it does not appear that you can have vertical centering + equal height through Flexbox alone.
http://jsfiddle.net/beK28/6/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
background-color: #343434;
text-align: center;
height: 500px;
}
Note, however, that you can have flex items with the display property of table-cell.
http://jsfiddle.net/beK28/7/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
height: 500px;
}
.section {
display: table-cell;
flex: 1;
}
I've had problems with stretch/centering before, and ended up formatting as display: table-cell:
.inner {
float: left;
width: 500px;
display: table;
background-color: #343434;
text-align: center;
}
.section {
display: table-cell;
width: 50%;
vertical-align: middle;
}