Can someone tell me why this code doesn't work
<div id="dojam_text_container" style="width: 300px; height: 300px;
margin:auto; background-color:Blue;">
<div style="display:table-cell; vertical-align:middle;">
<span id="text_dojmovi1" style="">"bla bla bla</span></div>
</div>
and this does..
<div style="position:absolute; top:10vw; left:10vh;">
<div style=" border: dotted red 1px; background-color:white; width:20vw; height:
20vh; display:table-cell; text-align:center; vertical-align:middle; position:relative;">
<span> I am some centered shrink-to-fit content!
<br />
</span>
</div>
</div>
Give display:table to your parent div
<div style="position: absolute;display:table;width:300px; height:300px; top:100px; left:100px; background-color:Black;">
.............
</div>
Fiddle
Docs to understand tabular structure using divs
Vertical & Horizontal Centering
Common issues:
Parent do not have a position set
Ancestors do not have a height or width set
Solution for child with known dimensions
This is a solution if you need it to be IE6 compatible. If you know the dimensions of the child, then
define the height/width of the parent.
set the parent's positioning
position the child absolutely with top, left being 50%, 50%.
add a negative margin to offset the child's height & width
JsFiddle
html, body, div.parent {
position: relative;
width: 100%;
height: 100%;
}
div.child {
position: absolute;
width: 10em;
height: 10em;
top: 50%;
margin-top: -5em;
left: 50%;
margin-left: -5em;
}
Solution for child with unknown dimensions
This solution will work for IE8+. If you don't know the dimensions:
define the height/width of the parent.
set the parent's display to table
set the parent to vertical align: middle
JsFiddle
div.fluid.parent {
display: table;
vertical-align: middle;
}
div.fluid.child {
width: auto;
height: auto;
}
More Resources
For more resources, see w3.org
Related
Lets say I have a div of heigh 400px and width 400px.
<div style="width:400px; height:400px; background:#CCC;" align="center">
<img src="/static/{{media_info.media_file}}" />
</div>
Now if I have a image of height 350 and width 200 px I want it to be adjusted in this div. I mean it adjust inside the div being child to the div. It should not fit to the div neither stretch. Just fit in the center.
Like div should be taken as 100% and image should be in its ratio.
Remaining 50 px in height and 200 px in width should be left. like buttom and top leaving 25 25 px and left and right leaving 100 100 px.
Also if the image is of say width 800px and height 700 px same way the div height and width should be considered as 100 percent and the image should lie in the middle without any stretch
I am not a front end developer :(
So you want the image to be centered inside the div, in its original size, and any overflow simply cut of when the image is larger than the div in any dimension?
Well you could just set it as a centered background-image, instead of using in actual img element.
If that’s not an option, position it absolutely – -50% from either “side” (top, left, right and bottom), and use margin:auto to center it:
div { position:relative; width:400px; height:400px; margin:10px; background:#ccc;
overflow:hidden; }
div img { position:absolute; top:-50%; left:-50%; right:-50%;
bottom:-50%; margin:auto; }
<div id="div1"><img src="http://placehold.it/350x250/ff9999/000000"></div>
<div id="div2"><img src="http://placehold.it/800x700/ff9999/000000"></div>
You can achieve this using transform property of css.
Here is the fiddle
div {
position: relative;
}
img {
display: block;
margin:0 auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Note, I cleaned up the inline styles, just to make it clear.
http://jsfiddle.net/s4ja2q1z/4/
div {
width: 400px;
height: 400px;
background: lime;
text-align: center;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
EDIT: Added fixes if the image is taller than the container.
Try putting max-width and max-height on the image:
<img style="max-width: 100%;max-height: 100%;" src="/static/{{media_info.media_file}}" />
This will keep the image dimensions limited to a maximum width and height of the parent container (aka 400px in this case) and it will scale down if you ever change your parent div's dimensions without changing any ratios that would cause stretching.
You can do it this way too by using the table-cell property.
http://codepen.io/Edrees21/pen/XJoEmp
<div class="container">
<img src="http://placehold.it/350x200/aEEAEE" />
</div>
.container {
width: 400px;
height: 400px;
text-align: center;
background-color: #cccccc;
vertical-align: middle;
display: table-cell;
}
I would set the image as a background of your div and then change the size of it using background-size: contain.
This will make your image not be distorted, but still fill the entire div.
<div style="width:400px; height:400px; background-image:url("image.jpeg"); background-repeat:no-repeat; background-size: contain; background-position: center;">
</div>
div {
text-align: center;
}
img {
max-width: 400px;
max-height: 400px;
vertical-align: middle;
}
I want to make 2 divs beside each other to be aligned on the same horizontal line WITHOUT FLOATs
I've tried Position:relative ,, but no luck
See the example below :
http://jsfiddle.net/XVzLK
<div style="width:200px;height:100px;background:#ccc;">
<div style="background:Blue; float:left; width:100px; height:100px;"></div>
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>
From the link above, I need the red box to be on the same line of blue box with no space below ..
EDIT : I want the red box to stay outside the container gray box (just as it is) thanks
Relative with inline-block display
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one"><div id="two"></div><div id="three"></div></div>
EDIT
The code below also works fine. Here, because of comments, the line feed is commented out and ignored.
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one">
<div id="two"></div><!--
--><div id="three"></div>
</div>
Why it works block displays take the whole width of their container, even if you set a very small width, rest of the space
will be taken as margin (even if you remove margin). That's just how
they behave. inline-block displays work much like inline displays
except that they do respect the padding etc you give them. But they
still ignore margins (someone correct me if I am wrong). Same as
inline displays, if you give a line-feed between them in your HTML,
it's converted to a small space. So to remove that, Here I have the
HTML in a single line. If you indent the code then the div#three
will be pushed down (as you have fixed width of div#one so height is
only option.)
Use Position properties when your height and width are fixed
<div style="width:200px;height:100px;position:relative;background:#ccc;">
<div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
</div>
<div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
</div>
</div>
If you want to avoid float, position and inline-block, here's a margin-only solution:
<div style="width:200px; background:#ccc;">
<div style="background:blue; width:100px; height:100px;"></div>
<div style="background:red; width:100px; height:100px; margin:-100px 0 0 100px;"></div>
</div>
Updated fiddle
If you want your divs on same line without floats you can use display: inline-block; and give some negative margin value to your div because inline-block contains some margin between them.
See this fiddle
As your Edited question I have submitted another fiddle here
Or you could simply add margin-top: -100px; to your fiddle.
http://jsfiddle.net/XVzLK/22/
<div style="width:200px;position: relative; background:#ccc;">
<div style="background:Blue; position:absolute; top:0; left: 0; width:100px;height:100px;"></div>
<div style="background:red; position:absolute; top:0; right: 0; width:100px;height:100px;"></div>
</div>
Setting position relative on the coloured divs makes their position relative to where they would have been in the document. I think what you wanted to do is make the containing div position relative, and the children divs positioned absolutely within it. I'm assuming that "with now space below" meant "with no space below"
There is a tutorial here that may be of use: http://www.barelyfitz.com/screencast/html-training/css/positioning/
I know there are a hundred and one questions about autosizing a div's height but no suggestions seem to work for me which leads me to believe I'm missing something obvious. Basically I have a container Div, then another smaller div inside (absolutely positioned) and in side that one I have X about of div boxes being created (relatively positioned). The problem is that the height of the main container div won't stretch with it. Any help? Thanks!
.mainContainer{
position: relative;
width:800px;
height:auto;
padding-top:10px;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-width:2px;
}
.smallerDivInsideMainDiv{
position:absolute;
left: 20px;
top: 50px;
width: 600px;
}
.divsThatAreOverflowing{
position: relative;
margin-top:20px;
border-style:solid;
border-width:1px;
}
From what I know, you can't have an absolutely positioned element inside a relatively positioned element and attempt to have the parent height adjust to the absolute child. If you're only using it for positioning with left and right, use margins instead.
<style>
.mainContainer{
width: 800px;
height: auto;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
background: #999;
}
.smallerDivInsideMainDiv{
margin-left: 20px;
margin-top: 50px;
background: #CCC;
width: 200px;
}
.divsThatAreOverflowing{
margin-top: 20px;
border-style: solid;
border-width: 1px;
background: red;
height: 300px;
width: 100px;
}
</style>
<div class="mainContainer">
<div class="smallerDivInsideMainDiv">
<div class="divsThatAreOverflowing"></div>
</div></div>
Here the parent is dark grey, and smaller div inside is light grey, with the overflowing div as red. When it changes height, both of it's containers will adjust.
You should use relative position for the smallerDivInsideMainDiv too and the main div will auto-resize with the total sizes of the contained divs (with their margins too), but it will ignore your "top: 50px;". For that you could add an empty div
<div style='height: 50px;'></div>
after smallerDivInsideMainDiv while still in mainContainer, something like:
.smallerDivInsideMainDiv{
position:relative;
<div class="mainContainer">
<div class="smallerDivInsideMainDiv">
<div class="divsThatAreOverflowing">x1</div>
<div class="divsThatAreOverflowing">x2</div>
</div>
<div style='height: 50px;'></div>
</div>
I have this css:
#manipulate
{
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
}
I have this html:
<div id="manipulate" align="center">
</div>
How do we position that div at the bottom center of the screen?!?
If you aren't comfortable with using negative margins, check this out.
HTML -
<div>
Your Text
</div>
CSS -
div {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
Especially useful when you don't know the width of the div.
align="center" has no effect.
Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.
#manipulate {
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
}
Use negative margins:
#manipulate
{
position:absolute;
width:300px;
height:300px;
margin-left:-150px;
background:#063;
bottom:0px;
left:50%;
}
The key here is the width, left and margin-left properties.
Here is a solution with two divs:
HTML:
<div id="footer">
<div id="center">
Text here
</div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
#center {
width: 500px;
margin: 0 auto;
}
Using a Flexbox worked for me:
#manipulate {
position: absolute;
width: 100%;
display: flex;
justify-content: center; // Centers the item
bottom: 10px; // Moves it up a little from the bottom
}
You can center it using negative margins BUT please note that it'll center exactly on the center of the screen IF any containing div is NOT SET to position:relative;
For example. http://jsfiddle.net/aWNCm/
So, best way to exactly center this div is to set correct properties position properties for its containing divs too otherwise it will be lost in some random ways.
100% working single line (Inline CSS Solve)
<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>
100% working single line (Inline CSS Solve)
<div style="padding: 20px; width: 100%; text-align: center;">Your Content Here</div>
My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.
The image is set to display as block at present and I can get it to where it needs to be, but it doesn't allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.
My current positioning, which gets it where it needs to be is:
img#watermark
{
margin-left: auto;
margin-right: auto;
display: block;
padding-left: 900px;
}
#content just needs to appear over the watermark.
Help greatly appreciated.
html:
<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>
css:
div {
margin:auto;
width: 512px;
height: 512px;
background: rgba(0,0,0,.4);
position: relative;
}
img {
position: absolute;
left: 50%;
margin-left:-256px;
}
http://jsfiddle.net/Db2cw/
the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.
Ex:
html:
<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>
CSS:
#outter {
width: 1000px;
height: 300px;
position: relative;
}
#image {
width: 1000px;
height: 300px;
position: absolute;
}
#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}
#content {
margin: 0 auto;
width: 900px;
}
Example here: http://jsfiddle.net/qwEhv/
"I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center."
What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.