I am trying to vertically align my login screen. Here is my code in JS Fiddle and used the css
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}
I am not getting my items vertically centered. Will i wont be able to achieve it since i use bootstrap class to horizontal center.
Bootstrap 4
Bootstrap 4 is flexbox by default, and there are flexbox utility classes for centering and alignment. The align-items-center class will work to vertically center rows and columns.
Bootstrap 3.x (orignal answer)
It will center both horizontally and vertically if you make the div and it's containers 100% height:
html,
body,
.fluid-container {
height: 100%;
}
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100%;
}
Demo
Another option (for modern browsers) is to set the full height using vh viewport unit:
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100vh;
}
Demo 2
Related
I tried this to vertically center all items in a Jumbotron,
display: flex;
justify-content: center;
align-items: center;
But the issue is all items are lined up in a single line like they are displaying inline. How do you vertically center them while still displaying them in block.
Since block element stacks vertically, change the flex direction to column, and so will the flex items.
display: flex;
flex-direction: column; /* added */
justify-content: center;
align-items: center;
Adding to above answer, you can also center text elements such as h1, p or a by setting text-align to center.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* aligning items */
text-align: center; /* aligning text */
I´m trying to adapt the background image i have on my website but i cannot get it smaller on Iphones, Nexus or whatever small phone i'm testing it. I am using the Chrome developer tools to test this.
Here's a snippet on JsBin: http://jsbin.com/dacamemule/edit?output
The background image is 1920x1080 which would make it too big for small phones but i did tried to create a break point using media queries with the image size set at 768x432 but it still didn´t work. It's supposed to be an image map where the links in it will "stick" in the same place no matter if it's desktop or responsive view. The blue dot with the video is one example. There should be more dots spread throughout the map.
Thanks for your help.
If you want your image to be responsive, you might want to remove the min-width:1024px rule from img.bg. Perhaps replace it with min-width: 100%; max-width: 100%; height: auto;?
However, if you really want to use your image as background, don't use an <img> tag at all. Use the background properties of your <body> or of some helper (container) and make use of the background-size property (and the required prefixes).
Proof of concept:
body {
background:white url("http://s33.postimg.org/loiuxh5wf/Fundo.png") no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
min-height:100vh;
margin: 0;
padding:0;
overflow-x: hidden;
font-family: sans-serif;
}
.someLinks {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.someLinks>a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 45%;
-ms-flex: 1 0 45%;
flex: 1 0 45%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
color: red;
text-decoration: none;
}
.someLinks>a:hover {
background-color: rgba(255,0,0,.35);
color: white;
}
<div class="someLinks">
link
link
link
link
</div>
This is just an example. Replace the links with your actual links and remove their onlick property when you want them active.
As of now, your desired outcome is unclear and this might not fit your purpose. Please create a Minimal, Complete, and Verifiable example of your problem, properly linking all your resources. Right now, the contents of video.js, index.html and style.css are unknown to us. And so are the images you are overlaying.
change position "fixed" to "relative" on your image css.
I have a fixed size image, let's say 800px(w) 800px(h). When I shrink the browser down, I want my image to maintain the aspect ratio. How can I achieve that with flexbox? Is that even possible? Browsers compatibility isn't an issue.
Here is my codepen.
http://codepen.io/vennsoh/pen/xEKzD
Or do I have to resort to #media queries,or element?
<div class="parent">
<img src="http://placehold.it/800x800" alt="" class="child" />
</div>
.parent{
display: flex;
}
Add to your css
.parent{
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
img {max-width:100%;}
try this
.child{
max-width:800px;
width:100%
height:auto;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Why doesn't the following code work in IE10?
.foo {
display: -ms-flex;
-ms-justify-content: center;
}
What do I need to write in order for them to work?
IE10 implemented the Flexbox draft from March 2012. Those properties correspond to these:
.foo {
display: -ms-flexbox;
-ms-flex-pack: center;
}
A good place to start when trying to get the syntax right for all browsers is http://the-echoplex.net/flexyboxes/
For centering elements horizontally and vertically within a container you'll get code something like this: (working in Chrome,FF,Opera 12.1+ and IE 10+)
FIDDLE
<div class="flex-container">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
</div>
CSS
.flex-container {
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-item
{
width: 100px;
height:100px;
background: brown;
margin: 0 10px;
}
/*
Legacy Firefox implementation treats all flex containers
as inline-block elements.
*/
#-moz-document url-prefix() {
.flex-container {
width: 100%;
-moz-box-sizing: border-box;
}
}
I am working on a menu bar that has all of its buttons distributed evenly in the center of the nav element (the container). I need this layout to look good on most devices, regardless of its size. The problem is, at one of the tablet sizes I am testing, only one of the buttons goes to the next line, leaving an undesirable look. Is there any way using css to have all items distributed on all lines being used evenly?
Here is the nav's style block:
nav {
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: #000;
}