I want to vertical center my container. Anyone knows how to do this using the Skeleton boilerplate? I've tried some things, but it continues to stay on top instead of vertical align. Hope someone can help me out:)
HTML:
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
CSS:
/* Base 960 Grid */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
Some browsers like 'margin: 0px auto'.
Change your margin: 0 auto to 'margin: 0px auto;'
try this.
not for skeleton framework though. An example -better dont override container and column classes Have new classes for them and override
<div class="container top">
<div class="between"
<div class="sixteen columns middle">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
</div>
CSS
.top{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.between{
display: table-cell;
vertical-align: middle;
}
.middle{
margin: 10px auto;
width: 960px;
}
Related
I have a flex container that wraps some cards. I have implemented a horizontal scroller with flex(using flex-nowrap). The flex wrapper container is subjected to have a 36px left spacing and a 0px right spacing initially. The catch here is after the last card is scrolled I need to have a 36px right spacing.
here is what I did so far
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px -16px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding: 0px 16px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
I have given a negative right margin for the wrapper to make it look like it's flowing from the right.
Once the last element is scrolled/reached I want it to look something like this
enter image description here
One thing I noticed is my scroll-inner(flex-nowrap) is not wrapping up the entire children. I presumed if we have five children each having width 50px. The scroll-inner should show a scrollable width of 250px, Unfortunately, it's not how flex is behaving. Any help or suggestion is much appreciated.
Updating few images that show what I'm really looking for
During scrolling
After scrolling till the last card
Try
.scroll-wrapper {
overflow: hidden;
margin: auto;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: auto;
}
I have found a fix and hope this help someone.
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding-right: 40px;
margin-right: -8px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
Please do answer if someone has a better solution!! Thanks
I am trying to stack elements on top of each other. In my situation I have elements with different heights that leads to unwanted white space.
I am looking for 6 and 7 boxes to move up with all corresponding elements under them.
.blockParent {
text-align: center;
position: relative;
width: 90%;
left: 5%;
}
.block {
position: relative;
display: inline-block;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
vertical-align: top;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
Results in this:
I think flexbox might be a solution but I have no experience with flexbox.
Any ideas? Thanks in advance!
Flexbox wasn't designed to solve that. You can use CSS multi-columns instead. Note, the display order changes from horizontal to vertical.
.blockParent {
column-count: 3;
}
.block {
display: inline-block;
vertical-align: top;
background-color: silver;
width: 100%;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
}
<div class="blockParent">
<div class="block"></div>
<div class="block"></div>
<div class="block smaller"></div>
<div class="block smaller"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block "></div>
<div class="block"></div>
<div class="block"></div>
</div>
.blockParent {
text-align: center;
position: relative;
width: 90%;
/* left: 5%; */
margin: 0 auto;
}
.block {
position: relative;
display: inline-flex;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
https://s.codepen.io/fasiya656/debug/NOrNQN/XxkVwaPeaooM
Trying to align the image vertically, and the text centered according to image. The whole card is about 300px * 200px. I want the image to be on the left hand side with text on the right.
<div class="card center-block">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="photo">
<img class="rounded" src="../im/3.jpg" width="130" height="130" style="min-height:50px;" />
}
</div>
</div>
<div class="col-sm-6" style="height: 250px; align-items:center">
<div class="content">
<h5 class="left-align"><strong>John Doe</strong></h5>
<p class="left-align">Software Developer</p>
</div>
</div>
</div>
</div>
CSS:
.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}
.photo {
padding-top: 35px;
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}
.content{
height: 100%;
}
You can add a class to the row and use flexbox positioning. align-items: center on the row that holds the 2 columns, then also use flex on the .content element and create a flex column with justify-content: center
.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}
.photo {
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}
.special-row {
display: flex;
align-items: center;
}
.special-row .content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card center-block">
<div class="container"><div class="row special-row">
<div class="col-sm-6">
<div class="photo">
<img class="rounded" src="http://androidandme.com/wp-content/uploads/2015/12/Google-Now-on-Tap.jpg"width="130" height="130" style="min-height:50px;" />
</div>
</div>
<div class="col-sm-6 details" style="height: 250px; align-items:center">
<div class="content">
<h5 class="left-align"><strong>John Doe</strong></h5>
<p class="left-align">Software Developer</p>
</div>
</div>
</div>
</div>
<style type="text/css">
#displayHeader {
img {
width: 100%;
max-width: 100%;
max-height: 100%;
}
.header-img-inner {
max-height:100%;
}
}
</style>
<div id="displayHeader" style="height: 83.03px;">
<div class="header-inner">
<div class="row">
<div id="headerCol0" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>TEST</p>
</div>
</div>
<div id="headerCol1" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
</div>
</div>
<div id="headerCol2" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>tt</p>
</div>
</div>
</div>
</div>
</div>
<div id="displayContent" style="height: 264.8px;">
<div class="inner">
</div>
<div>
</div>
<div>
</div>
<div>
Image and text go out of the div block, why is this happening?
No float left, right used. It's not working with position:relative for parent and position absolute for child, but still not work well.
I only set maximum height for image when I set in on the header-img-inner
Why not use position: inherit; so as to make the image and whatever you want inside the div to inherit the position. This might help, give it a try.
Do you want something like this?
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
}
.block:before {
content: '\200B';
/* content: '';
margin-left: -0.25em; */
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display:inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some Text</h1>
<img src="Untitled-2.jpg" height="150px">
</div>
</div>
Please check this link:-https://css-tricks.com/centering-in-the-unknown/
I'm trying to figure out how to make a table have a bottom horizontal scroll bar. This is my HTML:
<div class="grid-block table">
<div class="grid-block header">
<div class="grid-block small-2 column">
times 6
</div>
</div>
<div class="grid-block row">
<div class="grid-block small-2 column">
times 6
</div>
</div>
</div>
I have used this CSS thinking it would fix my problem.
.table {
overflow: auto !important;
width: 1400px !important;
}
I've added the importants at the moment just to make sure these stylings are applied.
I should also point out that every element here is a flex item.
Cheers
This code might help you get started.
.wrapper {
width: 100%;
overflow: auto;
white-space: nowrap;
font-size: 0;
}
.wrapper .child {
font-size: 1rem;
height: 50px;
width: 60px;
display: inline-block;
background-color: cornflowerblue;
text-align: center;
border: 1px solid coral;
margin-left: 10px;
}
.wrapper .child:first-child {
margin-left: 0px;
}
<div class="wrapper">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
</div>