I'm using materializecss and i want my DIV to be vertically centered the clean and maybe materializecss way?
<div class="container">
<div class="row">
<div class="col s12 infobox center">
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 1</span>
<p>BOX 1</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 2</span><br>
<p>BOX 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
This is what i want:
To make valign-wrapper work the container itself must have some height. Most just collapse to the content height. You can either set the height to some fixed value or you can use percentages. But if you use percentages you need to make sure that your containers container also have some height.
In this example I'm showing how to make something vertically aligned inside the body:
So if you set html and body to height 100%:
html, body, .my-wrapper {
height: 100%;
}
Notice how I set both html and body to 100% in addition to my own wrapper class.
Now I can add the valign-wrapper to my container and you'll see that it's content get's centered:
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
</div>
</body>
The point is your container must have a height otherwise it doesn't work. You can set the height yourself or let the layout handle it like in this case.
Updated
Horizontal centering using grid classes.
You can use a combination of grid sizes and offset to put content in the center (or where you fancy it):
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
<div class="row">
<div class="col s12 m8 offset-m2 l6 offset-l3>
... content centered 6 wide on large ...
... content centered 8 wide on medium ...
... content centered 12 wide on small ...
</div>
</div>
</div>
</body>
Notice that row and col goes hand in hand.
I created this example on Fiddle for you
(ps: there must be a flex-box version of doing this as well)
In order to verticaly align a div,section or a part of design using materialize you should add height to .valign-wrapper as you can see here: materializecss
Demo: demo
i did it by adding an innerdiv class to the row which contains your infobox and then apply the below css, check if it suits you:
<style>
.innerDiv{
width: inherit;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="container">
<div class="row innerdiv">
<div class="col s12 infobox center-align">
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 1</span>
<p>BOX 1</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 2</span><br>
<p>BOX 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
Materializecss gives you some small helpers http://materializecss.com/helpers.html
The first one ist for vertial align.
You could try to add an CSS property to the infobox Div, or the card div:
vertical-align: middle;
Or maybe just add Padding-top
This both is not materializecss, but I think materialize don't have a feature for vertical align at all.
//EDIT
I was wrong. There is a Materialize way, just add the class valign-wrapper to the main Div here.
For headings you can use valign.
About align in Materialize
Text Align
These classes are for horizontally aligning content: .left-align, .right-align and .center-align.
left-align: This should be left aligned
right-align: This should be right aligned
center-align: This should be center aligned
<div><h5 class="left-align">This should be left aligned</h5></div>
<div><h5 class="right-align">This should be right aligned</h5></div>
<div><h5 class="center-align">This should be center aligned</h5></div>
display: inline-block;
vertical-align: middle;
Lets first look at how materializecss aligns the code vertically using flexbox properties (search 'valign-wrapper' in the css file included in materialize.min.css file to examine).
.valign-wrapper{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center
}
Thus the above two elements could easily be aligned vertically using only HTML and CSS (see example below).
The CSS code:
.my-container{
display:flex;
align-items:center;
height: 100vh;
}
.box-container>div{
display:inline-block;
}
And the HTML Code :)
<div class="my-container">
<div class="box-container">
<div>Box A</div>
<div>Box B</div>
</div>
</div>
Related
How to make my code to use full width of the device? I am using bootstrap.
<section class="special-area bg-white section_padding_100" id="about">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Section Heading Area -->
<div class="section-heading text-center">
<h2>Why Is It Special</h2>
<div class="line-shape"></div>
</div>
</div>
</div>
<div class="row">
<!-- Single Special Area -->
<div class="col-12 col-md-4">
<div class="single-special text-center wow fadeInUp" data-wow-delay="0.2s">
<div class="single-icon">
<i class="ti-mobile" aria-hidden="true"></i>
</div>
<h4>Heading</h4>
<p>Some text here</p>
</div>
</div>
</div>
</section>
you have to use
class="container-fluid"
instead of container class because container class itself has paddings from the right and left...
From the docs:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
Just make sure it is your outermost element.
You can include those parts of your code inside a pre-defined div whose class name is container-fluid. Here are the properties of container-fluid:
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
You can also add a 100% width style to any other container as well, but maybe that can collide with other style rules of your CSS.
Hope it helps.
I am trying to center the text and an image in two columns. But, I tried everything but I could not manage to bring then in the vertical middle position of a .row .
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
Can anyone help me with the css to align the text and the image in the middle I want to achieve the results shown in the image.
JSFIDDLE
.vertical-align{
vertical-align: middle;
}
img{
border:3px solid #2d2d2d;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<img src="http://www.free2go.com.au/-/media/allsites/competitions/content-image/free2go-beatsstudioheadphones-480x360.ashx?la=en" />
<span className="custom-input vertical-align">Filters</span>
</div>
</div>
You can make use of the Flexbox in this kind of situations, which is the best for use
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
.row {
display: flex;
align-items: center;
}
Hope this will help you.
( using Bootstrap 5 ) I have a button with an Image + text inside it.
Issue was in my case, I used a float-end on the image - which caused the text to behave like the image doesn't expand the button's height and therefore the text was vertical aligned but not to the image but rather to the button.
Removing the float-end made all child-elements vertical aligned.
I am using the Flex Grid component of Zurb Foundation 6 to create a grid of responsive squares -- and that works beautifully. For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc. There must be something I am missing -- thanks for your help.
Here is the jsfiddle (which is the base code without any attempt at centering).
<div class="row">
<div class="square small-6 columns">
ABC
</div>
<div class="square small-6 columns">
DEF
</div>
</div>
<div class="row">
<div class="square small-6 columns">
123
</div>
<div class="square small-6 columns">
456
</div>
</div>
.square {
border: solid blue 1px;
padding-bottom: 30%;
}
For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc.
Well, the nested flex grid actually works:
.square {
border: solid blue 1px;
padding-bottom: 30%;
display: flex; /* new */
justify-content: center; /* new */
align-items: center; /* new */
}
It centers the content both vertically and horizontally.
The problem is that the boxes don't have any height. There's no space for the content to move vertically. What looks like height is actually padding, and that's outside the content box.
This is what the layout looks like without the padding-bottom: 30%: DEMO 1
Then add the nested flex container: DEMO 2
Then give the box some height: DEMO 3
Per the CSS Box Model, text goes in the content box. The padding is generally a content-free zone.
Here you go
li {
width:50%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
That is it, does the trick. Responsive etc.
Link
http://codepen.io/damianocel/pen/WrMmGe
You can do this with Foundation 6 (with Flex-Grid) only too.
The trick is to attach both align-spaced and align-middle to the outer row.
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>ABC</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>DEF</span>
</div>
</div>
</div>
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>123</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>456</span>
</div>
</div>
</div>
<style>
.square {
border: solid blue 1px;
height: 30vh;
}
</style>
as #michael-b points, the height is important.
Also, you can cut off one div layer if you do not need the blue line.
<div class="row align-spaced align-middle" style="height: 100px;">
<div class="small-6 row align-center">
<span>...</span>
</div>
</div>
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>
I have a question regarding centering row vertically!
I have here a simple html, with use of bootstrap 3:
<div class="container">
<div class="row">
<div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<img data-src="holder.js/460x308">
</div>
</div>
</div>
</div>
I would like to center this container or row ... doesn't matter.
So imagine i have a window which is 500px x 500px
I would like to pisition it in the middle of it, not on top (what is now the case) or bottom, but in center
PS: http://jsfiddle.net/e89TE/
try this css:
.container{
display:table;
}
.row{
display: table-cell;
vertical-align: middle;
}
should work. ps. post a fiddle next time
First thing you will need to do if you want the type on TOP of the image is make the image a background image:
<div class="col-sm-12 text-center">
<div class="foo">
Some text text text text text …..
</div>
</div>
The css
.foo {
background-image:url("holder.js/460x308");
}