I need to keep the subfooter div on the bottom of childbox div like a footer.Here is the jsfiddle
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
<style>
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
height:40%
}
</style>
And also need to keep the text 'keep on bottom of box' vertical align
Just try it once.
HTML
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
CSS
.parentbox {
width: 500px;
height: 400px;
border-style: solid;
text-align: center;
position: relative;
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle;
padding: 5px;
border: 2px solid black;
position: absolute;
bottom: 5px;
left: 12% !important;
}
I have tried it and would this be anything close to what you are looking for?
All I've done is added
position: absolute;
To the .parentbox, and
position: absolute; bottom: 0;
To the .childbox
Hope this helps.
try this jsfilddle i assume that's which you want to do
HTML
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
<div class = "footer">
keep on bottom of box
</div>
</div>
</div>
CSS
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
height:40%
}
.footer {
padding-top: 145px;
}
https://jsfiddle.net/2L6yjckz/
Related
I have two divs as you can see below. I want to create 5 px margin-top between the two. However margin-top of inner div cause unnecessary margin on the top of outer div, and hence cause unnecessary margin at top of the page.
Adding border property to outer div solve the problem and i can also fix it by other hacks like posioning and padding to outer div. However i am curious to know what is causing this problem ?
<div class="outer">
<div class="inner">
</div>
</div>
and here is the Css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer{
width:100%;
height:200px;
background:black;
}
.inner{
width:100%;
height:100px;
margin-top:5px;
background:red;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer {
width: 100%;
height: 200px;
background: black;
}
.inner {
width: 100%;
height: 100px;
margin-top: 10px;
background: red;
}
<div class="outer">
<div class="inner">
</div>
</div>
All you need is to make the display of the outer div inline-block.
display: inline-block;
cause from what I understand is two display block inside each other with behaving the same if one has margin the other will have and you will no notice that
html {
margin: 0;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.outer {
width: 100%;
height: 200px;
background: black;
display: inline-block;
}
.inner {
width: 100%;
height: 100px;
margin-top: 10px;
background: red;
}
<html>
<head>
<title>StackOverFlow 🍗</title>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
The problem is the inner div is in the very beginning of outer. One trick would be adding padding-top to outer div:
.outer{
/* other stuff */
padding-top: 1px;
}
.inner{
/* other stuff */
margin-top: 4px;
}
or put all the 5px in padding-top
.outer{
/* other stuff */
padding-top: 5px;
}
Or you may use another element before the inner div, for example hr
<div class="outer">
<hr>
<div class="inner">
</div>
</div>
But the best trick is (as Mohammad said) make the outer div inline-block.
.outer{
/* other stuff */
display: inline-block;
}
I need to keep the subfooter div on the bottom of childbox div like a footer.Here is the jsfiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="parentbox">
<div class="childbox">
<div id="subfooter">
keep on bottom of box
</div>
</div>
</div>
</body>
</html>
Use following css:
.parentbox:before {
vertical-align: bottom;
}
.childbox {
vertical-align: bottom;
}
Currently you have set vertical-align: middle in your css causing your child element to appear in middle of screen.
* {box-sizing: border-box;}
body {margin: 0;}
.parentbox {
width:500px;
height:100vh;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: bottom; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: bottom; /* vertical alignment of the inline element */
padding: 5px;
border: 2px solid black;
}
<div class="parentbox">
<div class="childbox">
I shall be in the bottom of parentbox regardless of its size!
</div>
</div>
As per CSS specification, the parent must be set to position: relative and the child can be set to position: absolute or fixed
The modified fiddle for your amusement, know that the answer to this question can be found pretty much anywhere both on this website and the internet. Positioning, that's the word.
JSFiddle
Also, a nice link about an article on positioning, might be helpful.
Positioning
here maybe it help.
html,body{
height:100%;
margin:0;
padding:0;}
.parentbox{
background:#ccc;
height:100%;
display:flex;
align-items:center;
justify-content:center;}
.childbox{
align-self:flex-end;
background:#999;}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
it has many ways to answer.
position absolute, and set bottom to 0.
display flex and set align items or align self
you need to read more about css.
wish it help.
You don't need to add the pseudo element for that just add position styling and there you go.
.parentbox {
width:500px;
height:400px;
border-style:solid;
text-align: center; /* align the inline(-block) elements horizontally */
position: relative;
}
.childbox {
display: block;
padding: 5px;
border: 2px solid black;
position: absolute;
left: 0;
right: 0;
bottom:0;
margin: 5px;
}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
Here is your Answer, Through CSS itself you can achieve this.
.parentbox{
height: 300px;
width: 200px;
background-color: #990000;
position: relative;
}
.childbox{
color: #fff;
background-color: #000;
position: absolute;
bottom: 0;
padding: 10px;
}
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
Please try it once..
HTML
<div class="parentbox">
<div class="childbox">
I shall be in the middle of parentbox regardless of its size!
</div>
</div>
CSS
.parentbox {
width: 500px;
height: 400px;
border-style: solid;
text-align: center;
position: relative;
}
.parentbox:before { /* create a full-height inline block pseudo-element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.childbox {
display: inline-block;
vertical-align: middle;
padding: 5px;
border: 2px solid black;
position: absolute;
bottom: 5px;
left: 12% !important;
}
I hope its helpful to you
.parentbox {
position:relative;
}
.childbox {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
There are many method to solute your requirement.Hope it can give you some tip
How can I center text 'One' vertically with respect to the parent box '#container' using only CSS 2.1 in the following code without using table ? Text '2.1' and text '2.2' also need to be centered vertically in the green boxes.
<div id="container">
<div id="col-1">
One
</div>
<div id="col-2">
<span>2.1</span>
<span>2.2</span>
</div>
</div>
<style>
#container {
position: absolute;
height: 100px;
border: 1px solid crimson;
vertical-align: text-bottom;
}
#col-1, #col-2 {
display: inline-block;
height: 100%;
}
#col-2 span {
display: block;
height: 48px;
line-height: 48px;
border: 1px solid green;
}
</style>
http://jsfiddle.net/wa3r7d6j/
Just change in css:
#col-1, #col-2 {
display: inline-block;
vertical-align:middle;
}
remove : height:100%; from #col-1, #col-2
Check Fiddle here.
I'm having trouble center text vertically in a DIV using CSS. I've followed the related answers here on SO and elsewhere, but can't seem to get it to work. My simplified scenario is
<div class="outer">
<div class="header-title">
<span class="header-text">This is the title</span>
</div>
</div>
and
div.outer {
position: relative;
height: 200px;
border-style: solid;
border-width:1px;
}
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
border-style: dashed;
border-width:1px;
}
span.header-text {
vertical-align: middle;
border-style: dotted;
border-width:1px;
}
but the result (in Safari) leaves the 'header-text' span at the top of the 'header-title' div:
your example shows a good workaround for vertically centering elements in a div:
display: table-cell;
vertical-align: middle;
so add it to your div css:
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
display: table-cell;
vertical-align: middle;
border-style: dashed;
border-width:1px;
}
I'm trying to use the table-cell way to center a div vertically and horizontally.
It works when I use the following code:
div {
display: table;
}
.logo {
display: table-cell;
position: absolute;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
But I'd rather wrap .logo in another div called .center like here JSFiddle, but for some reason, although it works in JSFiddle, it isn't working for me on my site.
Here is a good starting point.
HTML:
<div class="containing-table">
<div class="centre-align">
<div class="content"></div>
</div>
</div>
CSS:
.containing-table {
display: table;
width: 100%;
height: 400px; /* for demo only */
border: 1px dotted blue;
}
.centre-align {
padding: 10px;
border: 1px dashed gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top; /* Removes the extra white space below the baseline */
}
See demo at: http://jsfiddle.net/audetwebdesign/jSVyY/
.containing-table establishes the width and height context for .centre-align (the table-cell).
You can apply text-align and vertical-align to alter .centre-align as needed.
Note that .content needs to use display: inline-block if it is to be centered horizontally using the text-align property.
This would be easier to do with flexbox. Using flexbox will let you not to specify the height of your content and can adjust automatically on the height it contains.
DEMO
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>