I think this is a classic one. I found a lot of similar questions but no answer.
I want to vertical center any image of any not-known height into a div with overflow:hidden
This is what I have right now:
.outer {
padding-top:49px;
height:49px;
width:280px;
overflow:hidden;
background-color:yellow;
}
.outer .inner {
float:left;
position:relative;
display:block;
background-color:blue;
}
.outer .inner img {
position:relative;
top:-50%;
width:280px;
height:auto;
border:0px;
display:block;
}
So the .inner is pushed to the center of the .outer by padding-top, so I get a "window" of 2 x 49px = 98px height. Then the img I thought would be pushed out 50% from the .inner height but for some reason i get a different number…
Does anybody know what I am doing wrong?
Thank you in advance!
I faced a similar situation and solved it with a different approach.
For that I used the image as a background image of a div.
Code sample
<head>
<style>
div.imgbox1{
width: 160px;
height: 110px;
overflow: hidden;
background-position: 50% 50%; /* for vertical and horizontal center alignment*/
}
</style>
</head>
<body>
<div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
</div>
</body>
If using img tag isn't a must you can try this
First things first... An explanation of why you are getting the result you are getting. This is quite simple. Setting position: relative; (or absolute for that matter), and then setting top: 50%; aligns the very top of your image to 50%. If you make the height of your image 1px, you can see that the 1px is centered. Unfortunately there is no way with CSS to tell it to align to the center of the image rather than the top edge.
Now... A possible solution...
Assuming that nothing else is going inside this .inner div, have you considered allowing the image to determine the inner div's height via a margin?
Take for example this JSFiddle.
You can "center" the image inside the .inner div, by setting margin left and right to auto, and margin top and bottom to some px value... In my example 60px.
If you want to obtain a total div height of 600px, and your image is always 400px tall, then a margin top and bottom of 100px makes a total height of 600px. (400+100+100=600).
HTML:
<div class="outer">
<div class="inner">
<img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
</div>
</div>
CSS:
.outer {
height:520px;
width:520px;
overflow:hidden;
background-color:yellow;
border: 2px solid purple;
}
.outer .inner {
width: 340px;
display:block;
background-color:blue;
border: 1px solid red;
padding: 10px;
margin: 0 auto;
}
.outer .inner img {
width:280px;
height:auto;
margin: 60px auto;
border:0px;
display:block;
border: 1px solid orange;
}
A second possible solution...
Assuming that the <img> tag does not HAVE to remain an <img> tag, then a very simple way to do this is to move the image itself to CSS, as a background-image.
See this JSFiddle for a demonstration of this solution.
HTML:
<div class="inner">
</div>
CSS:
.inner {
width: 540px;
height: 340px;
display:block;
background-color:blue;
border: 1px solid red;
margin: 0 auto;
background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}
Related
I a blue div set to display: inline-block; so that it shrink wraps to its content. I am trying to center the blue div in the middle of the red div.
hi
<div class="dim">
<div class="test">
<div> test </div>
<div> 2nd </div>
</div>
</div>
.dim {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:1 !important;
background-color:red;
opacity: 0.5;
}
.test {
border: solid;
display: inline-block;
background-color:blue;
}
Jsfiddle link to code
I tried this in your fiddle. It worked.
.test {
border: solid;
display: inline-block;
background-color:blue;
position: fixed;
margin-top: 50%;
margin-left:50%
}
It will break once you resize the div. If you don't set a size to your div, the only way it will stay in the center without an stablished size is with JavaScript.
But, you don't have to look too hard to find better answers.
when i want to float a child div to left or right inside the centered parent div, the whole design goes left or right, depending on the float. So, how to float a child div and make the centered parent div in the center.
HTML:
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS:
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: left;
width: 300px;
}
#child-right{
float: right;
width: 300px;
}
Why does parent div go left/right, and doesn't stay in center? And how to make it to stay in center?
See the demo
#parent{
padding: 0px, auto;
width: 605px;
height:200px;
border:solid 1px #f00;
}
#child-left{
float: left;
width: 300px;
height:200px;
border:solid 1px #0F0;
}
#child-right{
float: right;
width: 300px;
height:200px;
border:solid 1px #00F;
}
For parent div you use this css code
margin:0 auto;
width:980px;
and for child u use this code for float
float:right or left;
width:anypx;
best regards
To center the parent element, use margin: 0 auto;
#parent{
margin: 0 auto;
width: 600px;
}
There are also lots of spelling mistakes in your code (chile not child), and missing > symbols, fix them before you continue
A working JSFiddle (Click me)
I want to build a page where my content is centered but responsive - it should be of a maximum width of 960 pixels but diminish if the window size diminishes.
At the same time, I want to have the background of this page in different colors on its left and right margins.
How can I achieve that?
If I use margin:0 auto on my main div, I can't control the background any longer.
For the content you will have
<div id="page">
<div id="content"></div>
</div>
if you put in your css file
page {
width: 100%;
background: #333; }
content {
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto; }
for the background color you can try some trick like this (these will apply to content)
border-right: 10px solid #blue;
border-left: 10px solid #white;
Just make it have a max-width and a percent width, with margin auto on both sides.
If you want to have a multicolor body background you can position two boxes on the background and give each a different colour. Now position those on the background with a negative z-index for example, so that the rest stays on the viewport. Here, I made it for you:
Source: http://jsfiddle.net/p8ZNz/4/
View fullscreen: http://jsfiddle.net/p8ZNz/4/embedded/result/
CSS:
#left{
width:50%;
height:100px;
position:absolute;
top:0;
left:0;
background-color:red;
z-index:-1;
}
#right{
width:50%;
height:100px;
position:absolute;
top:0;
left:50%;
background-color:blue;
z-index:-1;
}
#content{
position:relative;
width:90%;
height:100px;
max-width:960px;
margin:0px auto;
background-color:green;
color:#FFF;
}
The background will remain 50%-50% for all widths, and the centered box will grew up if you resize the window, till it reaches 960px wide. if you want the background be complete, just give it a 100% height!
http://jsfiddle.net/iambriansreed/Sw9ae/
HTML
<div class="left"></div>
<div class="right"></div>
<div class="centered">centered</div>
CSS
.left,.right {
position: absolute;
width: 100px;
top: 0;
bottom: 0;
}
.left {
left: 0;
background: blue;
}
.right {
right: 0;
background: red;
}
.centered {
position: relative;
margin: 0 auto;
max-width: 400px;
background: #ccc;
}
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>
I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for.
I would like to convert this to a tableless layout.
Note: header and footer have to be set to a fixed height in pixels (50px is ok).
The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.
You can do it with table style CSS properties, but still retain table less markup (which is still a win).
Example
HTML
<div id="container">
<div id="header"><div>header</div></div>
<div id="content"><div>content</div></div>
<div id="footer"><div>footer</div></div>
</div>
CSS
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
jsFiddle.
'Multiple absolute co-ordinates' is a nice way to achieve this. This is when you absolutely position a box, then give it both top and bottom co-ordinates. Without specifying a height, you get a box which wants to be 10px from the top, and 10px from the bottom edges of its parent.
Here's an example
There is an IE6 specific style you'll need to add, if you care about that browser.
Here's an article on the technique (plus the IE6 fix) - it's a good one to know, even if you don't use it for this problem.
You haven't said anything about heights of your sub elements, so I have had to make some presumptions. You could use percentages if you wanted.
<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}
#header {
height:15%;
width:100%;
background-color:red;
}
#center {
height:75%;
width:100%;
background-color:blue;
}
#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>
<body>
<div id="mainContainer">
<div id="header">Header</div>
<div id="center">Center</div>
<div id="footer">Footer</div>
</div>
</div>
</body>