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.
Related
So I have looked at other questions like this, yet none have solved my problem. What I want to be able to do is resize the window of the browser, yet keep the text in the centre of the window.
HTML:
<div id=inside>
Navjeeven Mann
</div>
CSS:
#inside {
position:relative;
width: 100%;
height: 100%;
font-size: 60px;
text-align: center;
color: black;
top:50%;
left:50%;
}
What it looks like now
To keep it centred horizontally, remove the top:50%;left:50%;
#inside {
position:relative;
width: 100%;
height: 100%;
font-size: 60px;
text-align: center;
color: black;
}
<div id="inside">
Navjeeven Mann
</div>
To center it horizontally and vertically, flex really does the job well, unless you have to support older browsers.
html, body {
margin: 0;
}
#inside {
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
font-size: 60px;
}
<div id="inside">
Navjeeven Mann
</div>
Looks like you want the text vertically and horizontally centered inside a div. I would first wrap your text inside a p tag. Then changeup the css a bit so your code will look like this:
html, body {
margin: 0;
}
#inside {
position: relative;
width: 100%;
height: 300px; /* change this to your liking */
border: 1px solid #000; /* to show size of div */
}
#inside p {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: auto;
font-size: 60px;
text-align: center;
color: black;
display: inline-block;
}
<div id="inside">
<p>Navjeeven Mann</p>
</div>
This should work across all devices
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/
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;
}
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>
im new to css and html i wanna cr8 a product box value like this
http://i.imgur.com/kMogtMz.png
I tried with these but didn't get any result.
I want .fill class to be dynamically modifiable.
Anyone can help me ?
.box {
width: 250px;
height: 30px;
background: grey;
color: white
}
.box .fill {
float: left;
width: 78%;
background: orange;
height: 100%;
}
.box .empty {
position: absolute;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill"><div class="fill-badge">Radeon 7870</div></div>
<div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>
You just need to look at your absolute and relative positioning. Make sure that all elements that are absolutely positioned are inside an element with relative defined as a position. So in this case you just need to add position: relative; to the .box.
.box {
width: 250px;
height: 30px;
background: grey;
color: white;
position: relative;
}
.box .fill {
float: left;
background: orange;
height: 100%;
}
.box .empty {
float: right;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
left: 0;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
position: absolute;
right: 0;
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill" style="width:60%;">
<div class="fill-badge">Radeon 7870</div>
</div>
<div class="empty">
<div class="empty-badge">125.6 GB/S</div>
</div>
</div>
Edited to show inline style.
You must set the .box position to relative. http://jsfiddle.net/Lzmop76a/
.box {
width: 250px;
height: 30px;
background: grey;
color: white
position: relative;
}
I would do it using a background color and a background image for the same element like:
.box {
width: 240px;
padding: 0 5px;
height: 30px;
line-height: 30px;
background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
color: white;
}
.box span{
float:right;
}
<div class="box">
Radeon 7870 <span>125.6 GB/S</span>
</div>