<td>
<div class="paper" style="display:flex; ">
<div class="row" style="height: 20px; background-color: "></div>
</div>
</td>
In the .paper, justify content works fine but align-items wont work. where as in its child class .row, align-self wont work.
Before this <td> i have set a flex property as well. the code looks like this:
<td>
<div class="wrapper" style="display: flex;">
<div class="close" style="align-self: center;">
<i class="icon fa fa-times"></i>
</div>
<div class="image ml-15">
<img class="width-100" src="commercial/front-end/shop/lauren-winter-studio-top-natural_0190-cropped.jpg" alt="">
</div>
<div class="details pull-right ml-20" style="align-self: center;">
<span>Cream Top</span>
</div>
</div>
</td>
<td>
<div class="paper" style="display:flex; ">
<div class="row" style="height: 20px; background-color: "></div>
</div>
</td>
Make sure you have set the width or height on the right direction of the parent element when you use align-self/align-item.
You have to provide some hardcoded height and width to ".paper" class in order to use align-self/align-item.
https://jsfiddle.net/akash94/thpub2ej/2/
.paper{
display:flex;
height:200px;
width:200px;
border:1px solid lightblue;
align-items:center;
justify-content:center
}
.row{
align-self:flex-end;
}
Related
I am trying to achieve the following design in my code. I want to make the whole page responsive and put break points whenever necessary. So, I thought, It would be nice to implement this using CSS flexbox.I am kind of newbie with flexbox, so any helps would be highly appreciated. So, In my "section-two__main" div I have the items number and name. I want to display those items just like a table( as like the picture below). I could use css order property but then again I lost the responsiveness directly when shrinking the page. Can anybody guide me through this, if possible? How, can I achieve the design and maintain the responsiveness? At least before putting the breakpoints, Is it possible to adjust design so that when the page shrinks the items stay as like the actual design? I would like to use css flex box if possible. Thanks in Advance.
The design I would like to achieve:
And here is the code, that I have tried so far:
.wrapper{
display:flex;
flex-direction:column;
}
.section-one{
background-color:gray;
width:95%;
margin:0 auto;
}
.section-two{
background-color:white;
width:95%;
margin:0 auto;
margin-top:10px;
}
.section-two__header{
background-color:darkgray;
}
.section-two__footer{
background-color:darkgray;
}
.section-two__main{
background-color:white;
width:70%;
display:flex;
flex-direction:column;
margin:0 auto;
}
.name{
border:1px dotted;
}
.number{
border:1px dashed;
}
<div class="wrapper">
<div class="section-one">
First section
</div>
<div class="section-two">
<div class="section-two__header">
second section header
</div>
<div class="section-two__main">
<div class="number">1</div>
<div class="name">One</div>
<div class="number">2</div>
<div class="name">Two</div>
<div class="number">3</div>
<div class="name">Three</div>
<div class="number">4</div>
<div class="name">Four</div>
<div class="number">5</div>
<div class="name">Five</div>
<div class="number">6</div>
<div class="name">Six</div>
<div class="number">7</div>
<div class="name">Seven</div>
<div class="number">8</div>
<div class="name">Eight</div>
<div class="number">9</div>
<div class="name">Nine</div>
<div class="number">10</div>
<div class="name">Ten</div>
<div class="number">11</div>
<div class="name">Eleven</div>
<div class="number">12</div>
<div class="name">Twelve</div>
</div>
<div class="section-two__footer">
second section footer
</div>
</div>
</div>
Link to Fiddle: Demo
BreakPoint styles:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
display: flex;
flex-direction: column;
}
.name {
border: 1px dotted;
width: 8.3vw;
display: flex;
align-items: center;
justify-content: center;
}
.number {
border: 1px dashed;
width: 8.3vw;
display: flex;
align-items: center;
justify-content: center;
}
.oben {
display: flex;
align-items: center;
justify-content: center;
}
.unten {
display: flex;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="oben">
<div class="number">
<p>1</p>
</div>
<div class="number">
<p>2</p>
</div>
<div class="number">
<p>3</p>
</div>
<div class="number">
<p>4</p>
</div>
<div class="number">
<p>5</p>
</div>
<div class="number">
<p>6</p>
</div>
<div class="number">
<p>7</p>
</div>
<div class="number">
<p>8</p>
</div>
<div class="number">
<p>9</p>
</div>
<div class="number">
<p>10</p>
</div>
<div class="number">
<p>11</p>
</div>
<div class="number">
<p>12</p>
</div>
</div>
<div class="unten">
<div class="name">
<p>one</p>
</div>
<div class="name">
<p>two</p>
</div>
<div class="name">
<p>three</p>
</div>
<div class="name">
<p>four</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
</div>
</div>
</body>
</html>
This should now be responsive
You can use flexbox yes, but simplify your HTML and CSS like this:
HTML
<div class="container"> <!-- this is the master container -->
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div> <div class="sub-container">
<span>one</span>
<span>1</span>
</div>
</div>
CSS
.container { /* seting ths master container to flex display creates a flexbox display with these DEFAULT values already built-in : flex-direction:row; */
display:flex;
}
.sub-container { /* same here flexbox, but we change to vertical flexbox with flex-direction:column; and we add align and justify to center to it aligns nicely centered in both axis X and Y */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:1px solid black; /* this is your external border */
}
span {
margin:2px; /*this spaces things out a bit more nicely */
}
span:nth-child(2) { /* the nth-child() selector with (2) will select every SECOND 'span' element and give it a border-top */
border-top:1px solid black;width:100%;text-align:center; /* also we align the content of the second span and give it a full-width so that t he border-top is the full width of the sub-container */
}
I know you are asking about flexbox, but if you want to explore a different approach you can try using a table instead. That's exactly what they are made for. You could do something like this:
.table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
padding: 5px;
}
<table class="table">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
<th>six</th>
<th>seven</th>
<th>eight</th>
<th>nine</th>
<th>ten</th>
<th>eleven</th>
<th>twelve</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
[enter image description here][1]currently i am facing one problem.
I generated table using div with fix header and scrollbar to div row section.
but problem is both div are not taking whole 50% 50% width.
I have tried following code.but not working.
.brd2 {
height: auto;
max-height: 100px;
overflow: auto;
position: absolute;
width: 100%;
}
.back-clr {
background-color: red;
}
HTML PART
<div class="container">
<div class="row">
<div class="col-md-8">
<div style="display: table;width:100%">
<div style="display: table-row">
<div style="width:50%; display: table-cell;">
Test
</div>
<div style="width:50%; display: table-cell;">
test
</div>
</div>
<div class="brd2" style="display: table-row;">
<div class="content" style="width:50%; display: table-cell;">
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
</div>
<div class="content back-clr" style="width:50%;display: table-cell;">
this is second div
</div>
</div>
</div>
</div>
</div>
</div>
How can I align img in center to the respective to the text below it? The wrapper div is aligned left.
<div class="wrapper">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
Add another wrapper around the com-icon and com-text. And then align that were you want it. Example below:
<div class="wrapper">
<div class="wrapper-inner">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
</div>
Add this to your css file:
.wrapper{
text-align: center;
}
or if you just want to check if it's working you can add the infamous inline style.
This not a recommended method other than just to see if it's OK!
<div class="wrapper" style="text-align:center;">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
make a table
table.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.com-text,
.com-icon {
margin: auto;
}
<div class="wrraper">
<table class="center">
<tr>
<td>
<div class="com-icon">
<img src="image.jpg" alt="laptop logo">
</div>
</td>
</tr>
<tr>
<td>
<div class="com-text">
<p>IT Solutions</p>
</div>
</td>
</tr>
</table>
</div>
Trying to center content within each of the two side-by-side divs.
Not sure why my content within each of these divs seems to center towards each other.
I have built a main container and two divs within it. The text is center aligned but not sure how to center the content inside of the divs.
Any ideas?
.div-header-seller-resources{
font-size:30px;
line-height:32px;
margin-bottom:10px;
}
.div-detail-seller-resources{
font-size:20px;
line-height:22px;
margin-bottom:45px;
}
.div-main-container-seller-resources{
width:100%;
}
.div-main-container-seller-resources{
margin-top:20px;
text-align: center;
display: flex;
justify-content: center;
}
.div-seller-resources-left{
width: 300px;
display: flex;
text-align:center;
}
.div-seller-resources-right{
width: 350px;
display: flex;
text-align:center;
}
.seller-resources-height{
height: 125px;
}
<div class="div-main-container-seller-resources">
<div class="div-seller-resources-left" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">How Yodega Works</div>
<div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Referrals</div>
<div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">How to Sell with Yodega</div>
<div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
</div>
<div class="clear"></div>
</div>
<div class="div-seller-resources-right" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">Setting Up Your Store</div>
<div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Advanced Shipping & Product Options</div>
<div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Order Management, Seller Dashboard & Payment</div>
<div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="seller-overview-button-container">
<button id="button2" type="button contact-button">Seller Overview</button>
</div>
Add one more outer container div and add this rule.
.container{
display:flex;
Justify-content:center;
}
And inner div
.inner {
display: flex;
flex-direction:row;
}
And the structure will be(this is pug)
div(class="container ")
div(class=" inner")
div my_left
div my_right
Set width of left and right div.
You can give CSS to the parent class text-center and for your inside or child div use margin:0px auto;.
This will result making your each child element center inside the div.
I have the following HTML:
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
</div>
</div>
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 200px;"></div>
</div>
</div>
</div>
</article>
I am using display: table-row because I heard that this would make my DIVs work like table cells and I was wanting the DIVs to be the same height. However it seems like the first grid_6 grid has a small height while the second has at least 100px. How can I make it fill to be the same height?
Here's an example: fiddle
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
You have set the height of second element i.e Height = 100px .
Set the height to both the div elements .
Both grid_6 elements are the same height. The reason why you see one red rectangle larger than the other is you are coloring the inside divs. If you put the color on the grid_6 elements - they are the same. http://jsfiddle.net/A7yXc/
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 100px;">das</div>
</div>
</div>
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 200px;">das</div>
</div>
</div>
</div>