I'm trying to align div horizontally for far too long now.
The thing is, I set the width property but it doesn't seems to do anything.
.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
width: 100%;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}
<div class="vtab">
<div class="left big">Hello, Jean-Michel</div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span ></div>
</div>
Does anybody have a clue ?
The divs keep stacking on the left of the container div.
.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
display: table;
width: 100%;
box-sizing: border-box;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}
<div class="vtab">
<div class="left big"><span>Hello, Jean-Michel</span></div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span></div>
</div>
you can achieve that using display:flex; and align-items:center;
.vtab {
display: flex;
align-items: center;
}
Related
I'm not sure what to do, I've tried using position, but it just aligns to the middle of the page, not the div.
I'm trying to align it vertically in the middle.
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
background-color: black;
display: inline-block;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
Wrap it in a flexbox container
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
display:flex;
align-items:center;
background-color: black;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
How to vertically align div inside another div using property vertical-align:middle.
Here is my code.
.hello {
height: 100px;
width: 100px;
background-color: black;
vertical-align: middle;
display: inline-block;
color: white;
}
.parent {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>
I referred and found giving parent table-cell property and child inline-block works but still not.
Html
Here you go.
Code Snippet:
.hello {
height: 100px;
width: 100px;
background-color: black;
vertical-align: middle;
display: inline-block;
color: white;
}
.parent {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="hello">
hello
</div>
</div>
vertical-align works only for display: table-cell, in some browsers you should wrap parent with display: table
.hello {
height: 100px;
width: 100px;
}
.parent {
height: 400px;
width: 400px;
display: table-cell;
vertical-align: middle;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>
Use vertical-align: middle on .parent and make .hello - display: block with margin: 0 auto, like:
.hello {
display: block;
margin: 0 auto;
}
.parent {
display: table-cell;
vertical-align: middle;
}
Have a look at the snippet below:
.hello{
height:100px;
width:100px;
background-color:black;
display: block;
margin: 0 auto;
color: white;
}
.parent{
height:400px;
width:400px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class ="parent ">
<div class="hello">
hello
</div>
</div>
Hope this helps!
I'm using display:table and display:table-cell to display a div as if it were a table. I want the contents of one div (.cellcontents) to be vertically centered as if it were in a table cell, the problem is that I have another div (.cellhead) with the same parent that I want to have vertically aligned to the top.
So what I want is something like this
| |length|
| | |
|[img]| 120m |
| | |
What's the best way to accomplish this? Am I going about this the wrong way entirely? Current html:
<div class="table">
<div class="film row">
<div class="poster cell">[IMG]</div>
<div class="detail cell last">
<div class="cellhead">length</div>
<div class="cellcontents">120 minutes</div>
</div>
</div>
</div>
css is here
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid lightgrey;
border-right: none;
}
.film .cell.poster {
text-align: center;
vertical-align: middle;
width: 140px;
height: 5em;
}
.film .cell.detail {
vertical-align: top;
text-align: center;
width: 200px;
}
.film .cell div.cellhead {
background-color: #e5e5e5;
}
.film .cell.last {
border-right: 1px solid lightgrey;
}
Here is a solution, but it requires different markup.
.table {
display: table;
text-align: center;
border-left: 1px solid lightgrey;
}
.table .table {
width: 100%;
height: 100%;
border: none;
}
.row, .cell {
vertical-align: middle;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid lightgrey;
border-width: 1px 1px 1px 0;
height: 5em;
}
.cell .cell {
border: none;
}
.row.head {
background-color: #e5e5e5;
}
.cell.detail {
height: 100%;
width: 200px;
}
.cell.poster {
height: 5em;
width: 140px;
}
<div class="table">
<div class="cell poster">[IMG]</div>
<div class="cell">
<div class="table">
<div class="row head">length</div>
<div class="cell detail">120 minutes</div>
</div>
</div>
</div>
Setting .cell.detail height to 100% allows it to take up the most space.
See the differences here
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid lightgrey;
border-right: none;
}
.film .cell.poster {
text-align: center;
vertical-align: middle;
width: 140px;
height: 5em;
}
.film .cell.detail {
vertical-align: top;
text-align: center;
width: 200px;
}
.film .cell div.cellhead {
background-color: #e5e5e5;
height: 20%;
}
.film .cell.last {
border-right: 1px solid lightgrey;
}
.film .cell.last .cellcontents{
position: relative;
top: 50%;
transform: translateY(70%);
}
<div class="table">
<div class="film row">
<div class="poster cell">[IMG]</div>
<div class="detail cell last">
<div class="cellhead">length</div>
<div class="cellcontents">120 minutes</div>
</div>
</div>
</div>
Here a simplified version with an absolute positioned div.
Hope it helps.
.table {
display: table;
}
.cell {
border: 1px solid lightgrey;
border-right: none;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.table, .cell {
height: 5em;
}
.cell:first-child {
width: 140px;
}
.cell:last-child {
position: relative;
border-right: 1px solid lightgrey;
width: 200px;
}
.cell > div.heading {
background-color: #e5e5e5;
position: absolute;
top: 0;
width: 100%;
}
<div class="table">
<div class="cell">
[IMG]
</div>
<div class="cell">
120 minutes
<div class="heading">length</div>
</div>
</div>
I have a h1 and a p inside a div with display:flex.
The two are positioned side by side, but they have to be under each other.
It is about the elements with class jktitre and class jktxt inside (div)jkpage.
jkpage div is flex with jksidebar (side by side)
I did not expect that the text elements somehow inherit the flex property. Or something like that.
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
The CSS:
body{
background-color: lightgrey;
}
.jktitre{
margin-left:5%;
float:left;
display: block;
}
.jktxt{
margin-left:5%;
padding:10px;
float:left;
}
.jkrow{
width:100%;
display:flex;
}
.jkheader{
margin-top:20px;
height:150px;
width:100%;
background-color: #2d18a4;
}
.jknavbar{
height:45px;
width:100%;
background-color: black;
}
.jkpage{
height:400px;
width:75%;
background-color: #e7e7e7;
display:flex;
}
.jksidebar{
height:400px;
width:25%;
background-color: darkslategrey;
display:flex;
}
.jkfooter{
height:150px;
width:100%;
background-color: blue;
margin-bottom: 20px;
}
Add flex-direction: column to the parent element to display them under each other. The default value for it is row which shows the child elements from left to right(Side by side)
body {
background-color: lightgrey;
}
.jktitre {
margin-left: 5%;
float: left;
display: block;
}
.jktxt {
margin-left: 5%;
padding: 10px;
float: left;
}
.jkrow {
width: 100%;
display: flex;
}
.jkheader {
margin-top: 20px;
height: 150px;
width: 100%;
background-color: #2d18a4;
}
.jknavbar {
height: 45px;
width: 100%;
background-color: black;
}
.jkpage {
height: 400px;
width: 75%;
background-color: #e7e7e7;
display: flex;
flex-direction: column;
}
.jksidebar {
height: 400px;
width: 25%;
background-color: darkslategrey;
display: flex;
}
.jkfooter {
height: 150px;
width: 100%;
background-color: blue;
margin-bottom: 20px;
}
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
How can I make this html structure
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
be displayed like this while div#1 and #2 have css float:left
( id names are integers only for demonstration purposes )
First of all, you will need to change the id's of your <div>'s to start with an alphabet rather than just one single digit since you won't be able to style your <div>'s using CSS then. Moreover, to achieve the sort of a layout which you're trying to create, you will need to wrap your two floated <div>'s inside a <div> and set the display property of that <div> to inline-block.
Here's a demo:
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
Edit: If you want to align the three boxes to the right side of the page then you will need to wrap your HTML inside another <div> and set the text-align property of that <div> to right, like this:
#wrapper {
text-align: right;
}
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="wrapper">
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
</div>
If you want to keep the given HTML structure, here's two different methods. One is working around the floats, the other is simply using absolute or relative positioning to force the third div into place.
HTML
<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
CSS using inline-block (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
display: inline-block;
}
CSS using relative positioning (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
clear: both;
position: relative;
left: 220px;
top: -430px;
}
Fixed here - http://jsfiddle.net/3147og96/1/
html:
<div class="parent">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
css:
.parent {
height: auto;
width: 120px;
padding: 5px;
padding-left: 110px;
border: 1px solid red;
}
.parent div {
height: 50px;
width: 50px;
border: 1px solid red;
display: inline-block;
}
#one, #two {
float: left;
}