Basically I have three items aligned in a row with flexboxes and it worked however there is a weird issue with the vertical align.
Screenshot:
Fiddle Demo
.flex-container {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.points {
flex: 1;
vertical-align: top;
}
.p1 {
align-self: flex-start;
}
.p2 {
align-self: center;
}
.p3 {
align-self: flex-end;
}
<div class="textcenter">
<h1>Lorem Ipsum</h1>
<h4>dolor sit amet, consectetur adipiscing</h4>
</div>
<div class="flex-container bg">
<div class="points p1 textcenter">
<h3>Support for most popular<br>languages and frameworks</h3>
<p></p>
</div>
<div class="points p2 textcenter">
<h3>Open Source</h3>
</div>
<div class="points p3 textcenter">
<h3>Constantly Growing</h3>
</div>
</div>
Thanks in advance,
Diego
Revise Fiddle
.flex-container {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
background-color: cadetblue;
}
.points {
flex: 1;
vertical-align: top;
text-align: center;
}
p1,p2,p3 {
}
<div class="textcenter">
<h1>tutorial-db</h1>
<h4>The Ultimate Coding Recource Database</h4>
</div>
<div class="flex-container bg">
<div class="points p1 textcenter">
<h3>Support for most popular<br>languages and frameworks</h3>
<p></p>
</div>
<div class="points p2 textcenter">
<h3>Open Source</h3>
</div>
<div class="points p3 textcenter">
<h3>Constantly Growing</h3>
</div>
</div>
Related
I have flexbox container with items. They are both horizontally and vertically aligned by center. This is normally rendered on a live website. However I need to align font awesome icons with text in such way:
1). All icons are aligned by the left corner
2). The gap which goes after icons and before text must have the same length.
Here is a CodePen with a draft
So it's shown that icons are not aligned properly.
Code:
.contact-container {
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
.contact-container .copy {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.contact-container .fa {
font-size: 40px;
-ms-flex-negative: 0;
flex-shrink: 0;
padding-left:20px;
}
.contact-container .item > *{color: #9f6a4a;}
.contact-container .item {
-webkit-box-flex: 0;
flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 47%;
background:#fff;
color:#fff;
}
.contact-container .item{
/*height: calc(720px/4);*/
-ms-flex-item-align: center;
align-self: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/*min-height: 100%;*/
min-width: 50%;
}
.contact-container h2{font-size:1.1em;font-weight:500;}
.contact-container h3 {padding-left: 10px;}
By definition, you can't left-justify objects that are centered. You would have to set the parent container to left align the icon/text, then give a left margin/width to allow for them to match up - as each individual container is again in another container.
EDIT: A rough example, here:
.contact-container {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.item {
width: 50%;
}
.item > * {
color: #9f6a4a;
}
.copy {
display: flex;
flex-direction: row;
align-items: center;
width: 70%;
margin: auto;
}
h3 {
margin: 0 .5em;
}
i.fa {
font-size: 40px;
padding-left:20px;
}
/* IGNORE THIS - for illustrative purpose only */
.item:nth-child(1), .item:nth-child(4) {
background-color: #DFD;
}
.item:nth-child(2), .item:nth-child(3) {
background-color: #DDF;
}
<script src="https://use.fontawesome.com/97dc0a8baa.js"></script>
<div class="contact-container">
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-mobile-phone"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading">+1 123 45 678 99</h3></div>
</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-envelope-o"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading"> <span>info#info.com</span></h3></div>
</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-map-marker"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading">City, Street 22</h3></div>
</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-calendar"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading">I-V 09:00-17:00<br> VI 09:00-14:00<br>VII closed</h3></div>
</div>
</div>
</div>
</div>
I want to make a text vertically center on 100vh height.
Here is what I've done
.about-header {
height: 100vh;
background: #000;
}
.about-header p {
font-size: 5em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid about-header text-center">
<div class="row ">
<div class="col-md-12">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
just add this below CSS:-
.about-header{
height: 100vh;
background: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Your content will be vertically aligned.
I've got a project I'm working on and I am stumped. I've got a video that is not positioned right in firefox, but in chrome it is perfect. Here is the Firefox version And here is the Chrome version
I'm not sure why they are rendering differently.
Here is a code snippet from that section of the html template:
<div ui-view>
<div ng-controller="mainController" class="container">
<div class="main_page">
<div class="jumbotron">
<video autoplay playsinline muted loop>
<source src="vid/peer2package_video.mp4" type="video/mp4">
</video>
<h1>Peer2Package</h1>
<p>Earn money for driving your car!</p>
</div>
<div class="logo_section">
<div class="logos">
<div id="buy" class="front_logo"><img src="img/buy.svg">
<p>BUY</p>
</div>
<div id="sell" class="front_logo"><img src="img/sell.svg">
<p>SELL</p>
</div>
<div id="deliver" class="front_logo"><img src="img/deliver.svg">
<p>DELIVER</p>
</div>
</div>
</div>
<div id="buy_things" class="main_section">
<div class="column_one logo"><img src="img/buy.svg">
<p>BUY</p>
</div>
<div class="column_two text">
<p> Buy things and get them sent directly to you!</p>
</div>
</div>
<div id="sell_things" class="main_section">
<div class="column_one text">
<p> Sell things and no more customers complaining about the wait time!</p>
</div>
<div class="column_two logo"><img src="img/sell.svg">
<p>SELL </p>
</div>
</div>
<div id="deliver_things" class="main_section">
<div class="column_one logo"><img src="img/deliver.svg">
<p>DELIVER</p>
</div>
And here is the css:
div.container {
width: 100%;
height: 100%;
margin-top: 70px;
}
div.main_page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
div.jumbotron {
padding: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 200px;
background-color: #1c283b;
margin-bottom: 40px;
z-index: 9980;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
div.jumbotron h1 {
color: #fff;
font-size: 2.9em;
position: absolute;
margin-top: -5px;
z-index: 9987;
}
div.jumbotron p {
margin-top: 90px;
font-size: 1.3em;
z-index: 9988;
}
Any help would be greatly appreciated. Thank you.
I'm trying to create a header using flexbox that features 3 divs: left = navigation, center = logo, right = social icons/links. The problem I am running into is that each div in my header is not even, so the logo is not directly centered directly in the header.
I thought if I set the flex-grow property to 1, then each section would have the same width.
Here's my code:
<html>
<head>
<style>
*, *:before, *:after {
box-sizing:border-box;
}
body {margin: 0}
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
width: 100%;
padding:25px 20px;
background-color:#f0f0f0;
}
.header__left {
flex-grow:1;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.header__center {
flex-grow:1;
-webkit-align-items: center;
align-items:center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.header__right {
flex-grow:1;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
</style>
</head>
<body>
<header class="header">
<div class="header__left">
<nav class="header__navigation">
Menu
</nav>
</div>
<div class="header__center">
<div class="header__logo">Flexbox</div>
</div>
<div class="header__right">
<div class="header__social">
Facebook
Twitter
</div>
</div>
</header>
</body>
</html>
Use flex:1; instead of flex-grow:1;
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0
}
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
width: 100%;
padding: 25px 20px;
background-color: #f0f0f0;
}
[class*="header__"] {
border: 1px solid green;
}
.header__left {
flex: 1;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.header__center {
flex: 1;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.header__right {
flex: 1;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
<header class="header">
<div class="header__left">
<nav class="header__navigation">
Menu
</nav>
</div>
<div class="header__center">
<div class="header__logo">Flexbox</div>
</div>
<div class="header__right">
<div class="header__social">
Facebook
Twitter
</div>
</div>
</header>
I've asked a similar question and tried to modify it's answer for this but I'm not sure what to do.
I have a div of unknown dimensions and I need to place an img, span, or div in one of 9 positions within it.
top left
top middle
top right
center left
center middle
center right
bottom left
bottom middle
bottom right
The question from above works for images but not with anything of unknown dimensions.
I've tried various combinations but cannot figure it out. http://jsfiddle.net/g7hydky2/3/ is what I'm working with.
The only thing I can think of is using display: table and display: table-cell on the outer and inner elements because then I can fully use vertical-align and text-align. However, this seems like a bad hack and I feel like there has to be a better way.
Also, I need this to work on IE 8...
Solved with flexbox,
Acknowledging this article - Getting Dicey with Flexbox
.pip {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.one {
justify-content: flex-start;
align-items: flex-start;
}
.two {
justify-content: center;
align-items: flex-start;
}
.three {
justify-content: flex-end;
align-items: flex-start;
}
.four {
justify-content: flex-start;
align-items: center;
}
.five {
justify-content: center;
align-items: center;
}
.six {
justify-content: flex-end;
align-items: center;
}
.seven {
justify-content: flex-start;
align-items: flex-end;
}
.eight {
justify-content: center;
align-items: flex-end;
}
.nine {
justify-content: flex-end;
align-items: flex-end;
}
body {
text-align: center;
}
.dice {
width: 50px;
height: 50px;
padding: 5px;
border: 1px solid grey;
border-radius: 15px;
display: inline-flex;
vertical-align: top;
margin: 10px;
}
.pip {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.one {
justify-content: flex-start;
align-items: flex-start;
}
.two {
justify-content: center;
align-items: flex-start;
}
.three {
justify-content: flex-end;
align-items: flex-start;
}
.four {
justify-content: flex-start;
align-items: center;
}
.five {
justify-content: center;
align-items: center;
}
.six {
justify-content: flex-end;
align-items: center;
}
.seven {
justify-content: flex-start;
align-items: flex-end;
}
.eight {
justify-content: center;
align-items: flex-end;
}
.nine {
justify-content: flex-end;
align-items: flex-end;
}
<div class="dice one">
<div class="pip"></div>
</div>
<div class="dice two">
<div class="pip"></div>
</div>
<div class="dice three">
<div class="pip"></div>
</div>
<div class="dice four">
<div class="pip"></div>
</div>
<div class="dice five">
<div class="pip"></div>
</div>
<div class="dice six">
<div class="pip"></div>
</div>
<div class="dice seven">
<div class="pip"></div>
</div>
<div class="dice eight">
<div class="pip"></div>
</div>
<div class="dice nine">
<div class="pip"></div>
</div>
For absolute certainty {pun intended} and older browswer support use positioning: Codepen Demo