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");
}
Related
I have 4 image div at the moment . And i want them to start aligning from the center . So that if anyone add more image div future it automatically align to the center.
Is it possible ?
use grid template provided by bootstrap and set the parent as container.
HTML
<div class="container">
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
</div>
As I understand this is what you want?
Full Layout
Yes, it is possible just you can try below code.
<div class ='container'>
<div class ='container-inner'>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
</div>
</div>
<style>
.container{
width:100%:;
}
.container -inner{
display: table;
margin:auto;
}
.image{
float : left;
}
</style>
Above code helps you to put all image container to center.
If you add single image to it it take only that width which is image width and align center, if more images take width according as align center.
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 have this:
<div class='container'>
<div class='row'>
<div class="col-md-5 col-sm-4 col-xs-12">
text goes here
</div>
</div>
<!--//col-->
<div class='col-md- col-sm-6 col-xs-12'>
<div class='text-center'>
image goes here
</div>
</div>
</div>
Pictures will tell what I'm trying to do better. Here is what it looks like right now:
bad-pupper.png
It's lined up properly but it doesnt look good. I want to match the center of the image to the text instead.
good-pupper.png
How should I do this?
You could wrap the two content divs inside a new div. The new div you'll give a height, line-height. That way you can use vertical-align which will center the image the way you wanted
just add padding-top:somepixel to your text div
like below
.text-center {
padding-top:15px;
}
Yes You can do that,
Check this fiddle here
Sample HTML
<div class="container">
<div class="row">
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;">
<p>This is heading</p>
<img src="https://unsplash.it/200" alt="">
</div>
</div>
</div>
</div>
</div>
Respective CSS
p,img {
margin:20px;
display:inline-block
}
For your reference : Checkout this link
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>
I have a large image which I want to display using the entire width of the browser.
My code is:
<html><body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3> Welcome! </h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_image">
<img src="..."/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_content">....</div>
</div>
</div>
</div>
</body></html>
Bootstrap will automatically create margins/padding to make the image fit in the center of the page.
Is there a way to always allow the main image to fit the entire width of the browser, but keep the padding/margins for everything else on the page?
Your best bet is to assign the image as a background-image.
Here's a JSFiddle (https://jsfiddle.net/qoaqjgpz) with only the most important stuff from http://startbootstrap.com/template-overviews/full-width-pics/.
The .html:
<div class="image-bg-fixed-height">
</div>
The .css:
.image-bg-fixed-height {
background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
height: 450px;
}
.img-center {
margin: 0 auto;
}
Let me know if this is what you were searching for.