So i have this demo :https://fiddle.jshell.net/ghyy6ntf/
Problem is that with flex i centered text and image but i cant put title and subtitle one bellow another. So i need to have image on left side and title and description verticaly centered in table td but one bellow another.
.product_box{
float: left;
width: 100%;
vertical-align: middle;
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: flex-start;
-ms-flex-pack: center;
justify-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
}
Related
Following is the QML text. When I am giving width and height to the image, it is not vertically aligned with the text. But without specifying height and width both are vertically aligned.
Text
{
text: '<p> <div> <h2>Hello</h2> <img style="vertical-align: middle" ; src="image.png" width="30" height="30" > </div></p>'
textFormat : Text.RichText
}
You may find something like this works if you're able to use flex.
<p>
<div id="vertical-container">
<h2>Hello</h2>
<img src="image.png" width="30" height="30" >
</div>
</p>
<style>
#vertical-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
</style>
Which converts over to:
Text
{
text: '<p>
<div id="vertical-container">
<h2>Hello</h2>
<img src="image.png" width="30" height="30" >
</div>
</p>
<style>
#vertical-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
</style>'
textFormat : Text.RichText
}
Refer here to see the browser support for flex.
I am trying to get an element to align to the right. I've used flexbox as I've found it easiest to align the text and any icons perfectly. The code snippet below is an example of what I am doing. The code works perfectly in Firefox and Chrome, but the justify-content is not working in IE. I already have "-ms-flex-pack" but it is not doing anything. The content is left-aligned in IE instead of being right-aligned.
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
}
.bold {
font-weight: 600;
}
<div class = "align-right">
Purchase Date:
<span class = "bold"> 09/10/2018</span>
</div>
You need to add flex-direction: column; to the parent element in order to justify-content in IE11
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
flex-direction: column; }
The following worked for me across different browsers.
.text-vcenter-right {
height: 200px;
width: 100%;
background-color: grey;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: right;
text-align:right;
}
<div class="text-vcenter-right">Text vertically centered and justified towards right</div>
How can i make my footer stick to the bottom of the page with almost no content?
<footer>
<hr>
<p> © 2017 Sindre Berge <p>
</footer>
in CSS:
footer{
position:fixed;
bottom:0;
text-align: center;
width: 100%;
}
or you could inline it:
<footer style="position:fixed; bottom:0; text-align: center; width: 100%;">
<hr>
<p> © 2017 Sindre Berge <p>
</footer>
Using CSS:
<style>
footer {
width:100%;
position: fixed;
bottom: 0px;
text-align: center; /* This line is not needed but centers your text */
}
</style>
<footer>
<hr>
<p> © 2017 Sindre Berge <p>
</footer>
See it in action and play with it here: https://www.w3schools.com/code/tryit.asp?filename=FEO78PICTTQP
Or try the flex solution proposed by Sam. This will not cause the footer to not always be at the bottom of the browser view but instead at the bottom of the page.
Flex solution:
.flex-container {
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: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
/*I give height 700px but can be adapted to a body being 100%*/
height:700px;
background:#cccccc;
}
.flex-content {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
background:#ca33aa;
height:100px;
}
<div class="flex-container">
<div class="flex-content">
This is my footer
</div>
</div>
I personally like to use
footer{
position:absolute;
bottom:0;
width: 99%;
}
as I've found that sometimes the site will go haywire -- especially as far as the width is concerned, as by itself I am sometimes greeted by a nasty horizontal scroll bar at the bottom, despite everything fitting onto the screen nicely.
Block solution:
footer {
display:block;
position:fixed;
bottom:0;
}
Flex solution:
.flex-container {
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: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
/*I give height 700px but can be adapted to a body being 100%*/
height:700px;
background:#cccccc;
}
.flex-content {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
background:#ca33aa;
height:100px;
}
<div class="flex-container">
<div class="flex-content">
This is my footer
</div>
</div>
I'm having a problem with a site redesign on IE 11 - the portfolio section slowly shrinks, aligns left, and eventually disappears when the window is less than 768px wide, and when clicking on a portfolio item, the content enlarges way beyond the viewport. There is no such issue with Chrome or Firefox.
This is the first time I have used flexbox, so I'm guessing that is the problem.
The site:
test.nicklemmon.com
Thanks!
I was able to resolve the issue where the content disappears entirely - it had something to do with usingn max-width on a div (though this didn't effect the other browsers)
Isolating where I think the left-aligning problem lies...I'm using SASS + Bourbon:
.work-container .row {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
max-width: 100%;
margin: 0 auto;
}
#media (max-width: 768px) {
.work-container .row {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 100% !important;
}
}
I'm also temporarly allowing overflow to see if anyone else can see where the issue lies. Looking at the code again, some of this is redundant.
OK, looking at it again I see where the problem lies, but I'm still not sure how to resolve it:
.work-belt {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 200%;
}
If I take out display: flex, then the shrinking/left-aligning behavior goes away, but then the layout breaks on Chrome and Firefox.
Anyone have any thoughts?
Alright, well nevermind then - I resolved the issue myself:
For some reason IE required the following properties on the container (.work-belt) whereas Chrome and Firefox didn't:
.work-belt {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 100%;
width: 200%;
}
I would be interested to hear why there is a discrepancy there, but at least it's resolved.
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;
}
}