I have a div that will show a picture in a bigger size.
So I want this div to be in the center of the screen. but margin 0 auto is not working...
CSS:
.form_postloader{
max-width: 1100px;
min-height: 400px;
background: #ffffff;
color: #000;
position:absolute;
margin:0 auto;
display:block;
}
http://jsfiddle.net/t5t031zj/
thank you!
it's not working because it's absolute positioned. You could remove the position absolute, or, if you need it you can do it like so:
position:absolute;
left: 50%;
transform: translate(-50%);
no need to set width, completely responsive!
http://jsfiddle.net/t5t031zj/2/
Due to position:absolute you need to use left and right to do this.
left:0;
right:0;
width: 400px;
Applying these to your box will center it, the issue is that you need to set a width.
Here is a fiddle: http://jsfiddle.net/t5t031zj/3/
Related
I would like to ask one question about css positioning and image
I have one outerwrapper div I set it's margin equal from the body element.
My problem is when I place an image in this outerwrapper container it overflow which I don't want.
I want to stay image in its outerwrapper div container. It's css here.
#outerwrapper {
position: absolute;
height: 100%;
width: 100%;
border: solid 2px green;
margin-left:30px;
margin-right:30px;
margin-top:30px;
margin-bottom:30px;
height: calc(100% - 60px);
width: calc(100% - 60px);
}
Here is working jsfiddle code.
https://jsfiddle.net/magtechpro/s3r2cf8r/3/
Many thanks
Just add overflow: hidden to your #outerwrapper
https://jsfiddle.net/nt2n9xu6/
you forgot to add the css class for .img-responsive
.img-responsive {max-width:100%;height:auto}
This will maintain the images proportions. You can also add overflow:hidden to your #outerwrapper.
If you don't care so much about keeping the proportion of the image intact but just want it to cover the area use this instead:
.img-responsive {width:100%;height:100%;}
CSS:
.absolute-centered {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: absolute;
right: 0;
top: 0;
height: auto !important;
width: auto !important;
zoom: 10
}
HTML:
<img src="http://funnyasduck.net/wp-content/uploads/2012/09/Internet-Explorer-Meme.jpg" class="absolute-centered" />
It appears that IE (9, 10) ignores max-width and max-height. Why that's happening?
JSFiddle also available here.
max-width and max-height correspond to the parent element. For example:
#parent{
width:500px;
max-width:500px;
height:100px;
max-height:100px;
background:#FF0000;
}
.child{
max-width:100%;
max-height:100%;
}
There are many ways of positioning an image into the centre of an element, but without seeing your parent element I can't suggest what method would be best.
For Div's I've used:
div#parent{
width:500px;
height:500px;
background:#FF0000;
}
div#parent>img.child /*your child element*/{
width:50%;
height:50%;
margin:auto;
background:#00FF00;
}
bare in mind though that margins and paddings can throw off positioning, widths and heights. Some elements (divs) require content to be 'visible'. Using a position:absolute; will position the element relative to it's static position and I don't think you want to use this to position an image in the centre. Another suggestion is that if your parent element is a fixed pixel size, why not make the child image the same size? Or use the image as the parent's background image?
I've been looking around for a while today and can't find a question that answers my specific problem.
I am designing my website and the content is in the center placed inside a div, which is the wrapper. My problem is that even though the height is set at 100%, if I add to much content, the wrapper does no stretch with the content, so the text ends up being placed outside the wrapper; it is still centered with it.
How can I fix this? The CSS I have is:
#wrapper {
position: absolute;
left: 50%;
width: 800px;
height: 100%;
min-height: 100%;
margin-bottom: 0px;
margin-left: -400px;
background-color: #F7F7F7;
border-radius: 5px;
}
Change
#wrapper{height:100%;}
to
#wrapper{height:auto;}
Fiddle here.
You could also take off the Height Property, if you need to have a minimum height of 100% before the wrapper div begins to enlarge as respective to its content. so it will be:
#wrapper{
min-height: 100%
}
not:
#wrapper{
height:100%;
min-height: 100%;
}
Check this jsfiddle
Is it possible to have centered text in a div that only has a margin to the left?
Basically centering the text according to the black box but not going outside the red box.
One solution would be to put text-indent: -25% but when we resize the window and make it smaller some parts of the text will be hidden.
Any ideas?
Update: I want the text to be centered to the black box, but not go outside the red box. And I don't want any margin/padding to the right
Used to Pseudo-elements
:after
Write this css
h1 {
display:block;
position:relative;
background: red;
height: 100px;
line-height: 100px;
margin: 0 0 0 0;
font-size: 2em;
}
h1:after{
content:'';
left:0;
top:0;
bottom:0;
width:25%;
position:absolute;
background:#000;
}
Live Demo
More information about this
About Pseudo-elements
I dont exactly understand what you are trying to do, but margin-left: auto; margin-right: auto; does the trick.
http://jsfiddle.net/j8CYE/14/
check out this FIDDLE
first set you div width and then set your h2 as width: inherit
I need a div with width of 40px to have a height of 100% minus a 60px gap at the top and another 60px gap at the bottom of the browser window? How can I do this? Thanks
Best way I've found is to use a position:absolute element with a top and bottom attribute.
http://jsfiddle.net/T4SXB/
#blah{
background:#fb5;
top:60px;
bottom:60px;
width:40px;
position:absolute;
}
/* per Pumbaa's suggestion, you should ensure that the page
doesn't have any weird formatting issues. Also make sure
that the #blah element doesn't have a parent with a "position"
attribute other than "static" (the default) */
html, body {
padding:0;
margin:0;
height:100%;
}
Simple example demonstrating 100% height with fixed height header and footer :)
Given the container is relative/absolute positioned, try css:
#outer { position: relative } // OR position: absolute
#innerDiv {
position: absolute;
top: 60px;
bottom: 60px;
width: 40px;
...
}
Top and bottom can be used simultaneously.
you could use the margin property :
#myDiv{
width : 40px;
height : 100%;
margin-top : 60px;
margin-bottom : 60px;
}
Here is a working example.