I am trying to create a page, where there is a div in the middle of the page centered horizontally, not vertically, with 3 more divs inside of it which are centered vertically and horizontally with equal spacing. In order to achieve this I thought it would be best to create another div with no background colour, then using margin: auto on it, this div is centered in the main div, but I can't get the 3 other divs to center in that, it's like the margins aren't taking into account the parent element?
I have tried a few methods which say they should center my elements, but they do not work for me, so I thought it would be best if someone can explain to me how this effect can be achieved in CSS.
Here is a screenshot of the current situation (red div will be invisible in final design, coloured to help me): http://i.imgur.com/cHWfVx6.png
HTML Code:
<html>
<head>
<title>Title Placeholder</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div id="title"></div>
<div id="introdiv"></div>
<div id="wrapper">
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
CSS Code:
html {
background: ##6f7604;
background-image: url("zenbg-1.png"), url("zenbg-2.png");
background-repeat: repeat-x, repeat;
}
#title {
background-color: rgba(83,188,255,0.6);
min-height: 5%;
width: 90%;
margin: auto;
border: 1px solid #ddd;
}
#introdiv {
background-color: rgba(255,207,76,0.9);
min-height: 15%;
width: 70%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#wrapper {
background-color: rgba(83,188,255,0.6);
min-height: 65%;
width: 80%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#container {
min-height: 10%;
width: 50%;
background-color: red;
margin: auto;
margin-top: 6.5%;
}
.box {
background-color: rgba(255,207,76,0.9);
min-height: 40%;
width: 20%;
margin-left: 5%;
margin-top: 5%;
border: 1px solid #ddd;
display: inline-block;
}
Thanks for your help, if you need any more info, ask.
You can use absolute position and transform to align element middle and center. Example:
.main {
width: 100%;
height: 256px;
padding: 20px;
background: #000;
}
.center-h {
width: 80%;
height: 200px;
margin: 0 auto;
position: relative;
background: #555;
}
.center-vh {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #999;
padding: 10px;
}
.box {
display: inline-block;
width: 64px;
height: 64px;
margin-right: 10px;
background: #ccc;
float: left;
}
.box:last-child {
margin-right: 0;
}
<div class="main">
<div class="center-h">
<div class="center-vh">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Use vertical-align: middle like this
.box {
background-color: rgba(255,207,76,0.9);
min-height: 40%;
width: 20%;
margin-left: 5%;
vertical-align: middle;
border: 1px solid #ddd;
display: inline-block;
}
Related
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
I need your help,
How would I go about amending the HTML or CSS markup below to have the text that is in my custom dialog box, to be vertically centered in the white space. Here is a snapshot of the problem:
and the expected result:
Here is the CSS:
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#Text {
width: 100%;
height: 100%;
text-align: center;
}
Here is the HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="Text">This is some sample text that will appear here</div>
</div>
</div>
Fiddle is: https://jsfiddle.net/vc5xL1vy/
You are going to need to set the container to display: table; and set all its children to display: table-cell but the table header to display: table-caption. I have made a few other modification to your header to a single div wrapper. JSFiddle: https://jsfiddle.net/1s45cdvs/1/
CSS
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
display:table;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
display: table-caption;
}
#Text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
HTML
<div id="wrapper">
<div id="container">
<div class="topbar">
<div style="float:left;" >Custom Dialog Box</div><div style="text-align: right;">Close</div>
</div>
<div id="Text">This is some sample text that will appear here</div>
</div>
</div>
There's multiple ways to do this but they all require you to set a pixel value for something. Padding, line-height, etc...
You can set the container display as table-cell to act like a table element would, then set width and height of the text container so that the element knows where the middle is. Using % never works for vertical aligning. Pain in the CSS.
#Text {
width: 500px;
height: 75px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
https://jsfiddle.net/bgbfpbta/
hello I have a problem with vertical-align: middle;
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
I want to div witch has .sub class will be vertical center of .wp div. plz help me.
Sorry for my bad english.
As an alternative, you can use transform's translateY method, like
transform: translateY(-50%);
Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/
vertivcal-align works with table-cell. look how it works in jsfiddle.
this is the html and css
<div class="table">
<div class="tableRow">
<div class="wp">
<div class="sub"></div>
</div>
</div>
</div>
.table {
display: table;
width: 100px;
}
.tableRow{
display: table-row;
height: 400px;
}
.wp {
display: table-cell;
background-color: tomato;
vertical-align: middle;
}
.sub {
height: 200px;
background-color: green;
}
also you can achieve this by "relative" and "absolute" positions
.wp{
position: relative;
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:
Vertically Aligning Divs
http://phrogz.net/css/vertical-align/index.html
http://jsfiddle.net/ktxpP/3/
In an attempt to not just provide a link answer:
The snippet below belongs to Lalit :
You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.
HTML
My Vertical Div CSS
.outerDiv {
display: inline-flex; <== This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white; }
.innerDiv {
margin: auto 5px; <== This is responsible for vertical alignment
background-color: green; } .innerDiv class margin must be as margin: auto *px;
[* can be your desired value.]
display: inline-flex property is supported in latest(updated/current
versions) browsers with HTML5 support.
Always try to define height of vertically align div (i.e. innerDiv)
for any further compatibility issue.
.wp{
width: 100px;
height: 500px;
background-color: #000000;
display:inline-flex; <--
}
.sub{
width: 100%;
height: 20%;
background-color: red;
margin:auto; <--
}
<div class="wp">
<div class="sub"></div>
</div>
If I understand you correctly, you want something like this
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position:absolute;
top: 250px;
width: 100px;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
Hope that helps.
this is my solution try this
<html>
<head>
<style>
.wp{
width: 10%;
height: 10%;
float: left;
background-color: green;
border: 1px solid #00FF 00;
margin: 0.5%;
position: relative;
}
.sub
{
width: 50%;
height: 50%;
background-color: red;
position: absolute;
}
.center{
margin: 0 auto;
left: 25%;
}
.right{
left: 50%;
}
.middle {
top: 25%;
}
.bottom {
top: 50%;
}
</style>
</head>
<body>
<div class="wp">
<div class="sub center middle"></div>
</div>
</body>
</html>
How do I horizontally center a fixed-width div within a percentage-width div?
For example in this fiddle, I'd like the Google logo centered.
<div class="box">
<div class="image">
<img src="http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png" />
</div>
<div class="text">Hello</div>
</div>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
}
http://jsfiddle.net/FloatLeft/g2u4E/
I've looked at various 'solutions' online and I haven't found anything that worked.
you can center the logo easy by setting background image for the div and change the background size as you need :
.box .image {
height: 160px;
width:400px;
background-color:#ff1769;
background-image: url('http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png');
background-size:47% 100%;
}
see FIDDLE
I would do this:
.box .image {
height: 160px;
width: 100%;
background-color:#ff1769;
background-position:center center;
}
Add the image as a background image.
http://jsfiddle.net/g2u4E/5/
<style>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
margin:auto;
}
.box .image img{
height: 100%;
width: 100%;
}
</style>
A div with fixed or % width can be aligned to center of its parent container by applying
margin:0 auto;
For Eg:
#divToCenter{
height: 160px;
width: 400px;
margin:0 auto;
}
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}