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>
Related
I need help centering two divs vertically in a fixed width/height div, where the two div scales in the middle of the parent div.
the first child div has a max-height, so it can scales dynamically to an extent. How can I center them so that teal and green divs goes in the middle of blue vertically?
JSFiddle HERE : https://jsfiddle.net/850sdmhj/
.subtext-container {
position: absolute;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
}
.color-teal {
max-height: 40px;
overflow: hidden;
background-color: teal;
}
.color-green {
max-height: 13px;
font-size: 9px;
background-color: green;
}
<div class="subtext-container">
<div class="color-teal">teal</div>
<div class="color-green">green</div>
</div>
Try display:flex property to make it work.
Updated CSS:
.subtext-container {
position: absolute;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
display: flex;
justify-content: center;
flex-direction: column;
}
.color-teal {
max-height: 40px;
overflow: hidden;
background-color: teal;
}
.color-green {
height: 13px;
font-size: 9px;
background-color: green;
}
Example fiddle : Demo
Note : Please check the browser support.
Browser support : http://caniuse.com/#feat=flexbox
Use the following CSS for the subtext-container
.subtext-container {
position: relative;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
display:table-cell;
vertical-align:middle;
}
Updated Fiddle https://jsfiddle.net/850sdmhj/1/
Maybe, by using a wrapper like
.color-wrap{
position:relative; top:50%;
transform:translateY(-50%)
}
.subtext-container {
position: absolute;
width: 180px;
height: 65px;
color: #ffffff;
background-color: blue;
bottom: 0;
}
.color-teal {
max-height: 40px;
overflow: hidden;
background-color: teal;
}
.color-green {
height: 13px;
font-size: 9px;
background-color: green;
}
.color-wrap{
position:relative; top:50%;
-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)
}
<div class="subtext-container">
<div class="color-wrap">
<div class="color-teal">teal</div>
<div class="color-green">green</div>
</div>
</div>
I would put .color-teal and .color-green inside another dive with ".vertical-align" class.
<div class="subtext-container">
<div class="vertical-align">
<div class="color-teal">teal</div>
<div class="color-green">green</div>
</div>
</div>
And then in CSS file:
.vertical-align{ /* This will do the trick to center content vertically */
display: table-cell;
vertical-align: middle;
}
.subtext-container {
display: table; /* Add Display Table to the container */
}
This will work only if the container (the one with display:table) has a fixed height.
Your fiddle with the working example: https://jsfiddle.net/rx79sb6m/
Also you can read this post where you can find another 5 methods to achieve the same result.
I've tried the following and it's working well in Firefox, Opera, Chrome and Safari. I couldn't get it to work with IE though, am I missing something?
http://jsfiddle.net/amrn/qn0dwohn/
inside .centered the left property is working properly, but it seems to be ignoring top.
(I'm using table and table-cell because I want the height of .right to be automatically the same as .left).
.wrapper {
display: table;
}
.left,
.right {
display: table-cell;
width: 200px;
}
.left {
height: 200px;
background-color: orange;
}
.right {
background-color: teal;
position: relative;
}
.centered {
background-color: tomato;
height: 70px;
width: 70px;
position: absolute;
top: 50%;
left: 50%;
}
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="centered"></div>
</div>
</div>
There seems to be a couple of ways to handle this.
UPDATED
Because IE seems to have an issue with absolute positioning while using table cells you can add another nested div that uses display: block; You can see the js.fiddle here.
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="nest">
<div class="centered"></div>
</div>
</div>
</div>
.nest {
position: relative;
background: pink;
}
The second method would be to not use display: table-cell and instead use display: inline-block Like this:
.wrapper {
display: block;
}
.left, .right {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
}
.left {
background-color: orange;
}
.right {
background-color: teal;
}
.centered {
background-color: tomato;
height: 70px;
width: 70px;
position: absolute;
top: 50%;
left: 50%;
}
You can see this working in your Js.Fiddle here.
Or lastly you could do the easiest fix which would be to add height to your HTML and BODY which will give your table a height of something greater than 0 since no content exists in it. You can see a similar SO question here about it.
html, body {
height: 100%
}
Hope that helps.
I ended up doing it by using an extra nested div which is absolutely positioned in relation to the relatively positioned table (not the table-cell). http://jsfiddle.net/amrn/qn0dwohn/17/
The downside is that I have to explicitly set the width on that extra div to be the same as its parent.
.wrapper {
display: table;
position: relative;
}
.left,
.right {
display: table-cell;
width: 200px;
}
.left {
height: 300px;
background-color: orange;
}
.right {
background-color: teal;
}
.right-wrapper {
position: absolute;
width: 200px;
bottom: 0;
top: 0;
background-color: aquamarine;
}
.centered {
background-color: tomato;
height: 70px;
width: 70px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="right-wrapper">
<div class="centered"></div>
</div>
</div>
</div>
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them
![
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #b3b3b3;
font-family: arial;
font-size: 14pt;
}
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top: -338px;
margin-left: -552px;
top: 50%;
left: 50%;
}
#centerdiv {
display: inline-block;
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
line-height: 50px;
position: absolute;
}
#leftdiv {
position: absolute;
background-color: #ff000f;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
}
#rightdiv {
position: absolute;
background-color: #000fff;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
text-align: right;
}
#lowerrightdiv {
position: absolute;
background-color: #fff000;
width: 80px;
height: 50px;
text-align: right;
display: inline-block;
line-height: 50px;
}
.arrowimg img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="containerdiv">
<div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
<div id="centerdiv">
</div>
<div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
<div id="lowerleftdiv">?</div>
<div id="lowercenterdiv">?</div>
<div id="lowerrightdiv">?</div>
</div>
</body>
</html>
You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.
I have also removed everything I didn't need to get my point across.
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top:-338px;
margin-left:-552px;
top:50%;
left:50%;
}
// I added this to float all the divs inside your container to float
#containerdiv div {
float: left;
}
#centerdiv {
// I removed position: absolute from every box, as well as line-heights, align and display
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align:center;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
}
#leftdiv {
background-color: #ff000f;
width: 80px;
height: 576px;
}
#rightdiv {
background-color: #000fff;
width: 80px;
height: 576px;
}
#lowerrightdiv {
background-color: #fff000;
width: 80px;
height: 50px;
}
Add this to your css:
* {
margin: 0;
padding: 0;
}
This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.
One way is like this:
<div id="leftdiv">
<img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
<img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
?
</div>
<div id="lowercenterdiv">
?
</div>
<div id="lowerrightdiv">
?
</div>
Hope its fix
{
margin: 0;
padding: 0;
border-sizing: border-box;
}
Here is my problem:
I have a <h1> inside <div> but when I set a border-radius in <div> the <h1> is out from the div, here is my code:
<div class="test"><h1 class="text">test</h1></div>
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
}
and this is live run
http://jsfiddle.net/n3aru/
Your text is actually not outside your div:
The visuality has just changed, not the structure.
You may want to position your text to the center:
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
text-align: center;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
jsFiddle
Centering trick: http://css-tricks.com/centering-percentage-widthheight-elements/
.test{
overflow: hidden;
}
Set the margin of the inner div. Something like this:
margin-top:50px;
margin-left:50px;
A much more concise way to center that text (if that's what you're after):
.test .text
{
margin: 0; /* Only need this because h1 elements have default margin. */
text-align: center;
line-height: 300px;
}
jsFiddle (taken from #nkmol as a base).