Using ZURB Foundation XY-Grid, I want to vertically center a cell's content, while still being able to have the cells fill the total height of the grid (for each cell to have it's own background image), which doesn't allow using the class ".align-middle" on the parent grid, since the cell height is then collapsed.
I want to be able to do this with a solid solution that will work on many different types of content, where you don't know the name and the height of the grid, so I am not looking for some specific hacks.
I have tried making the cell a flex-container, by adding the class ".flex-container", this allows me to add a class to vertically align the content, but I am hesitant to move away from the intended use of XY-grid, since it may create some other challenges that I am not forseeing now.
<div class="grid-container">
<div class="grid-x" style="height: 100px;">
<div class="cell small-6 this-cell-has-background-and-need-to-stretch">
This is the text I want vertically center
</div>
<div class="cell small-6 this-cell-has-background-and-need-to-stretch">
This is the text I want vertically center
</div>
</div>
</div>
The code above renders the cells correctly but with the text at the top of the cell.
You'll need another grid-x and an align-middle on the containers that have the background. The div inside those will be centered. Like so:
<div class="grid-container">
<div class="grid-x" style="height: 100px;">
<div class="cell small-6 grid-x align-middle" style="background:green;">
<div>This is the text I want vertically center</div>
</div>
<div class="cell small-6 grid-x align-middle" style="background:red;">
<div>This is the text I want vertically center</div>
</div>
</div>
</div>
Related
I'm getting back into frontend, so I'm making myself a portfolio page for practice, I'm using the css framework called Bulma I can't figure out why the "1" on the left isn't centered. I have 4 total divs in the body, 1 to hold the 3 columns, and the 3 columns sized in thirds
These are what my divs look like. I didn't feel like making a navbar in traditional CSS, so I used a framework for it. I'm using the repl IDE, here is the website where you can view my issue.
I basically just want those 3 divs to be centered, so I can add text in the middle div, labeled as "2". I made the two other divs so I can set some "boundaries".
<div class="columns"> <!--defines where the columns are-->
<div id="left" class="column is-one-third">1</div>
<div class="column is-one-third">2</div>
<div class="column is-one-third">3</div>
</div>
I see from your example that the divs are centered, but the text inside them is not.
<div class="columns">
<div class="column is-one-third has-text-centered">1</div>
<div class="column is-one-third has-text-centered">2</div>
<div class="column is-one-third has-text-centered">3</div>
</div>
I centered the text with has-text-centered and added a background color to demonstrate:
I am wondering wether is possible to set full width for some cells on Foundation 6.5 XY grid.
I am aware that the grid-container can be set to be fluid or full but my intention is to within one grid container to set some cells to be full width.
<div class="grid-container">
<div class="grid-x">
<div class="cell small-12">
Contained cell.
</div>
<div class="cell small-12 full-width-possible">
Full width cell possible?
</div>
<div class="cell small-12">
Contained cell.
</div>
</div>
</div>
I didn't find any other option than creating a separate full container.
Any ideas?
I think what you want is to have a nested cell a container with a width edge to edge of the viewport whilst its container remains at 1200px wide (of whatever Foundation default is).
An option you could try is using offsets. E.g.
HTML
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-10 small-offset-1">
Contained cell.
</div>
<div class="cell small-12">
Full width cell possible?
</div>
<div class="cell small-10 small-offset-1">
Contained cell.
</div>
</div>
</div>
Example result
By using .small-12, you are setting a cell to be 100% width.
So for fluid width I'd suggest you only wrap your cell that need to be contained in a .grid-container and the fluid ones without a grid-container.
I've created a bootstrap theme with 4 panel boxes and with text in it.
Three of the boxes have have 3 snetence in one of the box is only 1 sentence.
The Problem is, that the three boxes have a different height than the one box with the little text.
Is there a CSS option to create the panel - boxes with the same height, does not matters how much text are in the boxes?
Edit:
Here the code
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Heading</h3></div>
<div class="panel-body ">
<p>Much Text, to much for here :)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can try just making a table, or you can use display:table on the element which contains the boxes, and display:table-cell on the boxes.
You can also try using a flex grid.
How do I keep two divs that are side by side the same height?
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>
Foundation wizards,
Having a difficult time trying to center a 10-column element in the default 12 column grid.
EDIT: filled out the code a bit more
I tried putting 1 columns on either side to no avail:
<div class="row">
<div class="large-1 column"><p></div>
<div class="large-10 columns">
<div class="row>five large-2 columns in here</div>
<div class="row>five large-2 columns in here</div>
<div class="row>five large-2 columns in here</div>
</div>
<div class="large-1 column"><p></div>
</div>
My goal is to have that 3x5 grid in the exact center of the page. The 1 columns are currently not padding the 10 column to the center.
Center the div by including the large-centered class, or small-centered depending on your needs:
<div class="large-10 large-centered columns">
five 2 columns in here
</div>
And if you want to center the content of the large-10 div you can add the text-center class that is included in F4:
<div class="large-10 large-centered columns text-center">
five 2 columns in here
</div>
Also, don't forget to wrap your column divs in a row div or else the columns classes will not work. See this fiddle as an example.
Are you trying to center the text in the column or center the div on the page (equal margins on either side)?
If you're just trying to center the div (and not its contents) this works:
<div class="row">
<div class="columns one"></div>
<div class="columns ten">
test
</div>
<div class="columns one"></div>
</div>