I have a div that is using padding-bottom:100% to lock the aspect ratio of the div to 1:1 (for responsive purposes):
<div class="image-container">
</div>
css:
.image-container {
width: 100%;
height: 0;
padding-bottom: 100%;
background:yellow;
}
Now, I have an image inside of this container with width:100%. However, the image stays at the top and I can't use vertical-align:middle on the image.
Is there a way I can get this image centered vertically? JSFiddle: http://jsfiddle.net/g819gz2a/
Unfortunately I will need this to work for not only IE 9 but the deadly IE 8
You could do the following using absolute positioning:
JS Fiddle
(in example background of image made green to show its centered)
.container {
width:300px;
}
.image-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
background:yellow;
}
img {
width:100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0px);
}
And for older browsers:
JS Fiddle
img {
background: green;
width:100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Related
I'm trying to solve my problem since one week, and I really try everything !
I have a two column layout (left: content / right: description of the content).
I want this two columns full height page and the only way I found is :
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.
Here's the bootply I made to be more explicit :
http://www.bootply.com/1OovYNhx1E#
In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>
UPDATE
Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:
.fluid-container and .row are combined.
#inner is now moved out of #leftcol
#inner has the rulesets previously mentioned.
Both columns changed height: 100vh
Added position: relative to body.
Added width:100% and height:100% to html and body elements.
#inner {
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
PLUNKER
OLD
Use the following ruleset on your center element:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.
SNIPPET
body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: left;
background: brown;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: right;
background: yellow;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
outline: 3px solid red;
width: 25%;
height: 25%;
background: rgba(0,0,0,.4);
}
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
Finally find the answer HERE
With flexbox just add to your inner container :
margin: auto;
It will prevent the top scroll problem !
I am trying to centre an img within a containing div, where the img fills (minimum) 100% of the width and height of that containing div, meaning thta the image automatically scales to maintain image ratio. It is easy for me to align that img to the top, bottom, left or right, but I am hoping to centre the img both vertically and horizontally. I have been unable to locate the solution thus far, so any help greatly appreciated.
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
right: 0;
left: 0;
top: 0;
z-index: 0;
}
Fiddle
Use transform:translateX(-50) to manage this (but CSS3), large screen or small screen the image will always stay center and keep his ratio aspect.
Here the fiddle
Otherwise if you want something more cross browser you will probably need a bit of javascript, but I may be wrong.
Could you not set the hero image as a background? This will allow for more flexibilty both in terms of positioning and image size.
<section class="hero-image" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg');">
</section>
.hero-image {
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
This achieves what you've set out to do exactly. There's other benefits to this method too, for instance, responsive images.
The CSS above sets the properties for any background image within a div class of hero-image. All you need to do then, is inline the background-image itself.
NOTE: If this doesn't have to be CMS driven, you can simply apply the image to the class rather than have it inline.
If you're happy with CSS3 (not supported in some older browsers) you could do this:
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
#hero-image {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
You can try this:
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
display:block;
height: auto;
margin: 0 auto;
top: 0;
z-index: 0;
min-height:100%;
width:100%;
left: -50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
DEMO HERE
You could also just set it as a background with background-size: cover. Like this: https://jsfiddle.net/wzjzjsdp/2/
.img1, .img2 {
height: 400px;
width: 300px;
background-image:url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display:inline-block;
}
.img2 {
width:500px;
height:400px;
}
<div class="img1"></div>
<div class="img2" style="background-image:url(http://placehold.it/350x250"></div>
EDIT: You can use inline style.
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
I'm fiddling with Jquery Cycle slideshow and trying to add a couple of buttons. I can't seem to align them veritcally without top: #px; tomfoolery; I'd love to just align it to middle of the div vertically.
CSS
#slidecontainer {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 200px;
}
.slidecontrols {
top: 50px;
position: absolute;
z-index: 100;
width: 100%;
}
.slidecontrols a {
background-color: white;
}
.slidecontrols a.next {
position: absolute;
right: 0;
}
.slideshow {
width: 100%;
height: 100%;
}
.bannered {
height: 200px;
width: 800px;
}
HTML
<div id="slidecontainer">
<div class="slideshow" id="slideoptions">
<img src="http://i.imgur.com/ufZ0cxL.jpg" class="bannered" alt="" /></a>
<img src="http://i.imgur.com/RZTrFy4.jpg" class="bannered" alt="" /></a>
</div>
<div class="slidecontrols">
right
left
</div>
</div>
Here's a Fiddle. Adding vertical-align: middle; to .slidecontrols does absolutely nothing.
Here's another option if you don't want to guess or set any pixels:
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Assuming the height of the controls will be 20px, you could use a top value of 50% and then a negative margin-top value of half the element's height. In this case, -10px.
Example Here
.slidecontrols {
top: 50%;
margin-top: -10px;
position: absolute;
z-index: 100;
width: 100%;
}
Alternatively, if you need a solution for dynamic heights:
Example Here
.slidecontrols {
position:absolute;
top:0; right:0;
bottom:0; left:0;
z-index: 100;
width: 100%;
height:100%;
display:table;
}
.slidecontrols a {
display:table-cell;
vertical-align:middle;
}
Make top : 50% to slidecontrols which will align the links exactly at the center.
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
}
Another posibility if you consider the buttons has 20px height,
top: calc(50% - 10px); // 10px is half of buttons height
This will align it exactly at the center
When you have position: absolute, the vertical align will not work.
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}