Can someone tell me why the box div won't vertically align please? I also tried using a table and it won't align either. Thanks!
<html>
<head>
<style>
#box{
width:400px;
height:400px;
background-color:black;
}
#tb{
display:table;
width:100%;
}
#td{
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
</head>
<body>
<div id="tb">
<div id="td">
<div id="box"></div>
</div>
</div>
</body>
</html>
Css:
#box {
width:400px;
height:400px;
background-color:black;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Fiddle: http://jsfiddle.net/9uGAU/
Try this one
HTML
<div id="tb">
<div id="td">
<div id="box"></div>
</div>
</div>
CSS
html, body {
height:100%;
}
#box {
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #000;
margin: 0 auto;
}
#tb{
display: table;
height: 100%;
width: 100%;
background: #999;
text-align: center;
}
#td {
display: table-cell;
width: 100%;
height: 100%;
background: #999;
text-align: center;
vertical-align: middle;
}
Live Demo
Related
How to get inline divs with scrollbar and other divs inside them. When I made just inline divs with scrollbar everything works fine, but when I try to put other divs inside everything collapse.
I need to have something like this:
Simple code:
<div class="inlineContainer">
<div class="inlineDiv">
<div id="customDiv1">inside div 1</div>
</div>
<div class="inlineDiv">
<div id="customDiv2">inside div 2</div>
</div>
</div>
CSS 1(inline not working properly):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
display: inline-block;
position:relative;
}
#customDiv1{
position:absolute;
left:10px;
width:50px;
height:50px;
}
#customDiv2{
position:absolute;
left:20px;
width:60px;
height:50px;
}
CSS 2(inline not working properly):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
display: inline-block;
}
#customDiv1{
margin-top:50px;
width:50px;
height:50px;
}
#customDiv2{
margin-top:10px;
width:60px;
height:50px;
}
CSS 3(scrollbar not working):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
float:left;
position:relative;
}
#customDiv1{
position:absolute;
left:20px;
width:50px;
height:50px;
}
#customDiv2{
position:absolute;
left:10px;
width:60px;
height:50px;
}
Apply vertical-align: top; to the inline-blocks to make them align at the top of their container:
div {
border: 1px solid #777;
}
.inlineContainer {
width: 100%;
height: 150px;
overflow: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv {
height: 100px;
width: 100px;
display: inline-block;
vertical-align: top;
}
#customDiv1 {
margin-top: 50px;
width: 50px;
height: 50px;
}
#customDiv2 {
margin-top: 10px;
width: 60px;
height: 50px;
}
<div class="inlineContainer">
<div class="inlineDiv">
<div id="customDiv1">inside div 1</div>
</div>
<div class="inlineDiv">
<div id="customDiv2">inside div 2</div>
</div>
</div>
I have a header with three elements like this:
#container {
width: 100%;
}
#container div {
display: inline-block;
text-align: center;
}
#container #left,
#container #right {
width: 50px;
}
<div id="container">
<div id="left">L</div>
<div id="center">CENTER</div>
<div id="right">R</div>
</div>
What I'd like is to make it responsive so it covers the whole width of the window, but the side divs (left and right) need to preserve the same size so the only one that needs to change the size is the center one. How can I achieve this in CSS?
For example
#container {
display: flex;
}
#container div {
display: inline-block;
text-align: center;
flex: 1 1;
}
#container #left,
#container #right {
flex: 0 0 50px;
background-color: rgba(0,0,0,.1);
}
<div id="container">
<div id="left">L</div>
<div id="center">CENTER</div>
<div id="right">R</div>
</div>
Try floating the divs:
#container {
width: 100%;
}
#container div {
display: block;
text-align: center;
background: green;
}
#container #left,
#container #right {
width: 50px;
background: red;
}
#container #left {
float: left;
}
#container #right {
float: right;
}
<div id="container">
<div id="left">L</div>
<div id="right">R</div>
<div id="center">CENTER</div>
</div>
Set absolute position of left and right div.
#container #left, #container #right {
width: 50px;
background-color:red;
float:right;
position:absolute;
}
#container #center {
width: 100%;
margin:0px auto;
background-color:blue;
float:left;
}
HTML
<div id="container">
<div id="left">L</div>
<div id="center">CENTER</div>
<div id="right">R</div>
</div>
CSS
*
{
margin:0;
padding:0;
}
#container {
width: 100%;
}
#container div {
display: inline-block;
text-align: center;
}
#container #left,
#container #right {
width: 50px;
border:1px solid red;
}
#center
{
border:1px solid blue;
width: calc(100% - 115px);
margin:auto;
}
https://jsfiddle.net/ht3o5n81/
#container {
width: 100%;
display: flex;
flex-direction: row;
}
#container #center{
width: 100%;
text-align: center;
}
#container #left,
#container #right {
width: 50px;
}
<div id="container">
<div id="left">L</div>
<div id="center">CENTER</div>
<div id="right">R</div>
</div>
I hope this helps.
I have a large div at 100% width, with a smaller div inside at 1086px;
I am trying to get the small div to be centered horizontally and it's content vertically centered.
Where am I going wrong?
<html>
<head>
<title>test</title>
<style>
body {
margin:0; padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">asd</div>
</div>
</body>
</html>
vertical-centered is just working for table-cells. If you want to horizontally align, you should use display:table-cell;
Try this code;
http://codepen.io/ogzhncrt/pen/rVRONG
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 446px;
background: red;
margin: 0;
padding: 0;
}
.inner {
display: table;
width: 1086px;
height: 446px;
background: yellow;
margin: 0px auto;
}
.center {
vertical-align: middle;
display: table-cell;
}
.inner {
margin: auto;
width: 1086px;
height: 100%;
background: yellow;
/* margin: 0px auto;
vertical-align:middle; */
/* If you can use flexbox
display: flex;
justify-content: center;
align-items: center;
*/
}
/* If you can't */
.inner > p {
margin: 0;
height: 50%;
transform: translateY(100%);
text-align: center;
}
You can use flex box like this:
body {
margin:0;
padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
display: flex; /*added*/
align-items: center; /*added*/
}
<div class="wrapper">
<div class="inner">
<div>here the content</div>
</div>
</div>
See the snippet in Full Page.
Check this out for full information
I am trying to display 3 divs like a horizontal line.
Like this:
This is my HTML :
<div class="notactive"></div>
<div class="notactive"></div>
<div class="notactive"></div>
This is my CSS so far:
.notactive {
height: 10px;
width: 90px;
background: #fff;
position: absolute;
//left: 200px;
bottom: 30px;
cursor: pointer;
float: left;
display: block-inline;
}
UPDATE :
.notactive {
height: 10px;
width: 90px;
background: #fff;
position: absolute;
//left: 200px;
bottom: 30px;
cursor: pointer;
float: left;
display: inline-block;
}
But I can't get it to work.
Hope someone will help me.
Thank you.
A few problems:
it's inline-block not block-inline
position:absolute, left, bottom is unnecessary
You were using white as that background for it so you might not have been able to see it
jsFiddle
.notactive {
height: 10px;
width: 90px;
background: #000;
cursor: pointer;
display: inline-block;
}
There is another method using float:left; but inline-block is sufficient for your needs.
jsFiddle
HTML
<div class="notactive"></div>
<div class="notactive"></div>
<div class="notactive"></div>
<div class="clear></div>
CSS
.notactive {
height: 10px;
width: 90px;
background: #000;
cursor: pointer;
float:left;
margin:2px;
}
EDIT: Here is a fix to your problem on the fiddle you put in comments. I wrapped the image and name in a div with a fixed height. That pushed them down.
There's an error in your code - it should be
display: inline-block;
I wouldn't use absolute position for this, try this:
.notactive {
height: 10px;
width: 90px;
background: #fff;
cursor: pointer;
float: left;
}
Yes display: inline-block is your best option.
Remove absolute positioning unless there is a specific reason for it.
.notactive:nth-child(1){left:0px;}
.notactive:nth-child(2){left:100px;}
.notactive:nth-child(3){left:200px;}
<html>
<head>
<style>
.left
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}
.centre
{
background-color:red;
width:33%;
float:left;
height:200px;
}
.right
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}
</style>
<body>
<div class="left"></div>
<div class="centre"></div>
<div class="right"></div>
</body>
</html>
try this coding that I have Created for you
<html>
<head>
<style>
.notactive1
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:100px;
}
.notactive2
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:200px;
cursor: pointer;
}
.notactive3
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:300px;
cursor: pointer;
}
</style>
<body>
<div class="notactive1"></div>
<div class="notactive2"></div>
<div class="notactive3"></div>
</body>
</html>
Another Answer Hope You Statisfied by this ans......
<div>
<div style="display: inline-block;width:100px;height:100px;background-color:red;">DIV 1</div>
<div style="display: inline-block;width:100px;height:100px;background-color:green;">DIV 2</div>
<div style="display: inline-block;width:100px;height:100px;background-color:blue;">DIV 3</div>
</div>
I need some help here. I been trying to get it right for hours and i can't find an efficient solution.
<div id="Header">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'
/>
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
Example of what im trying to do
i want to have a liquid header with an image aligned to the left and a title aligned to the center, but both of em have to align to the middle of the height, no mather if i increase img /div's height
Had to add few more divs but it works. http://jsfiddle.net/74Rnq/23/
HTML:
<div id="Header">
<div class="wrap">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
<div class="text">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
CSS:
#Header {
position: relative;
height: 200px;
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
overflow: auto;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
text-align: center;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#Header .wrap {
display: block;
position: absolute;
width: 100%;
top: 50%;
margin-top: -50px; /* Half of wrap div height */
}
#Header .wrap .text {
position: absolute;
top: 50%;
margin-top: -27.5px; /* Half of text div height */
width: 100%;
}
For modern browsers you can do it via display:table, table-row table cell:
Modify your html like this:
<div id="Header" class="table">
<div class="row">
<div class="cell">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
</div>
<div class="cell main">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
#Header {
background: #DBE6EC;
border-bottom: 1px solid #595959;
position:relative;
padding:15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.cell.main {
width:100%;
}
The updated fiddle is here. This solution won't work in ie7. There is a older workaround for vertical align middle, if you have to support ie7.
Make the container div display: table-cell and each child div display: table-cell. Then you can give the child divs vertical-align: middle and they will always be vertically centered.
HTML:
<div id="Header">
<div id="image">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' />
</div>
<div id="title">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
and CSS:
#Header {
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
display: table;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#title{
display: table-cell;
vertical-align: middle;
width: 100%;
}
#image{
display: table-cell;
vertical-align: middle;
}
Aaand here's the jsFiddle.