I'm trying to vertically center a box by using display: flex;, while it's working when the box is small enough, but when the box exceeds the window height, part of the content will be cut off.
Working example: http://codepen.io/woutr_be/pen/bVQXLe
Example with large height: http://codepen.io/woutr_be/pen/KdrOZm
It seems to be related to the body: { height: 100%; }, but when I remove that, the box isn't centered anymore: http://codepen.io/woutr_be/pen/MazNrE
I can't figure out how to make it work when the box has a large height.
This is generally what I tend to use when I need to align an element vertically. Try changing the height and width and you will notice how it automatically calculates to center the element.
div.container{
width: 300px;
height: 300px;
position: relative;
background: salmon;
}
div.container > div.wrapper{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class='container'>
<div class='wrapper'>
<label>Some text</label>
<label>Some more text</label>
</div>
</div>
You could simply add max-height: 90% to .modal-box. The 90% is a bit arbitrary, but will give you some padding around the modal.
Related
I'm new to CSS and a bit stuck on how to modify my CSS to fix this issue.
So I have some code that is working for the most part. I have a div containing (simplified):
<div id="map">
<div id="mapContainer"/>
<img id="iconOnMap" src="pinSource"/>
</div>
And basic CSS placing the image in the center of the mapContainer div:
#iconOnMap {
width: 2em;
height: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 1;
}
#map {
width: 95vw;
height: 55vw;
position: relative;
}
#mapContainer {
position: absolute;
width: inherit;
height: inherit;
}
However, the image is centered in the div at its center, whereas, I want the bottom of the image to be at the center, not the center of the image to be at the center.
An illustration of the issue:
In the image above, the blue marker is pointing to the correct location and the red pin indicates the incorrect behavior. Whereas the pin's middle is where the center currently is, the pin's bottom / pinpoint should be at the center instead. Any tips on how to accomplish this?
It's in the middle because you're telling it to be in the middle. Instead of:
#iconOnMap {
...
transform: translate(-50%, -50%);
...
}
Try:
#iconOnMap {
...
transform: translate(-50%, -100%);
...
}
That should translate it in the Y direction by the icon's full height instead of half its height.
I need to render a frame (ie, a picture frame around a picture) by rotating an image:
0 degrees for the left
90 for the top
... and so on.
As far as I can tell there isn't a border-image-left|right|top|bottom property, although this would work too - please correct me if I'm wrong.
It seems I'll need to use the border-image property. Does anyone know if possible to rotate the image depending on the side?
I guess the other messy options would include
Creating four div's around the image
Manually generating a frame border image (this won't really work as 1. we've got over 300 images, and 2. the frames need to be used on images with different aspect ratios... )
Edit: 'depending on the side' = 0 degrees for left, 90 degrees for top, 180 degrees for right, 240 for bottom... See image below for an example.
Left hand border image
Partially forced, but wrapping it in a div and span and playing with pseudo elements and transforms seemed to work.
The image is wrapped in an .img-container div and a span, and the ::before and ::after elements are absolute positioned around the image.
Here's the markup:
<div class="img-container">
<span>
<img src="https://unsplash.it/300/300?image=200">
</span>
</div>
And the styling:
.img-container, span, img{
display: block;
position: relative;
}
/* Image border general */
.img-container::before,
.img-container::after,
span::before, span::after{
content: "";
position: absolute;
left: -30px;
top: 50%;
width: 30px;
height: 100%;
transform: translateY(-50%);
background-image: url("https://i.stack.imgur.com/0UI1w.png");
background-size: 100% 100%;
z-index: 2;
}
/* Specific to the right border */
.img-container::after{
left: auto;
right: -30px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
}
/* Top and bottom border general */
span::before,
span::after{
top: 0;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
/* Just the bottom */
span::after {
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(270deg);
}
May be a little much
Here's a fiddle
I'm trying to make a responsive, full width image work inside a narrow parent. So far, I can't clear these elements.
Javascript is ok, but fussing with the HTML isn't since it should work in a WordPress theme.
HTML:
<p>Visible content.</p>
<div class="feat-img">
<a href="#">
<img src="http://f.cl.ly/items/1e1515393T2l0D3I2503/feat-img.jpg"/>
</a>
</div>
<p>Hidden content :( </p>
</article>
CSS:
.feat-img img{
position: absolute;
width: 100% !important;
min-width: 400px;
min-height: auto;
height: auto;}
.feat-img img:empty{
left: 50%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}
article{
width: 50%;
margin: auto;
background:#ccc;}
Live: http://jsfiddle.net/wzvLa/4/
I think it can not be don only with css, because when you set position: absolute to img it's parent no longer contain it. You can write a little javascript code to do that:
$('.feat-img').css({ height: $('.feat-img img').height() });
This way you set the height of .feat-im to be the same as the image in it. Don't forget to do it on $(window).resize() too, so it can be responsive.
Here is what I do: jsfiddle
Here's one way of doing it:
html,body { margin: 0; }
.feat-img img {
position: relative;
width: 133.33%; /* (100% divided by article width) */
min-width: 400px;
height: auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
article {
width: 75%;
margin: auto;
background: #ccc;
}
(jsfiddle demo)
Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it's translation percentage on the parent element? Or am I not understanding something?
http://jsfiddle.net/4wqEm/2/
When using percentage in a transform translate on a non-SVG element, it refers to the width or height of itself. Take a look at https://davidwalsh.name/css-vertical-center (demo):
One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are being implemented on, as opposed to properties like top, right, bottom, left, margin, and padding, which only use the parent's dimensions (or in case of absolute positioning, which uses its closest relative parent).
On an SVG element, a transform percentage refers to the size of the parent instead!
Here is a pen:
https://codepen.io/trusktr/pen/gOdwWXv
svg, [outer] {
border: 1px solid black;
}
rect {
transform: translate3d(50%, 50%, 0);
}
[inner] {
background: black;
transform: translate3d(50%, 50%, 0);
}
<svg width="100" height="80">
<rect width="20" height="20" />
</svg>
<div outer style="width: 100px; height: 80px;">
<div inner style="width: 20px; height: 20px;"></div>
</div>
Strange, huh?
You can use vw and vh to translate based on the viewport size
#keyframes bubbleup {
0% {
transform: translateY(100vh);
}
100% {
transform: translateY(0vh);
}
}
What works for me using only CSS is:
.child {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Backward compatibility */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
How it works:
top and left positioning move child widget according to parent coordinates. Child widget's top-left corner will appear exactly in the center of parent (this is not what we want at this time).
translation will move child widget -50% to top and left based on its size (not the parent). It means, widget's center point will be moved exactly where top-left point was - which previously was set up as center of a parent, and this is what we want.
To use percentage in the translate property, you have to use Javascript : http://jsfiddle.net/4wqEm/27/
HTML code :
<div id="parent">
<div id="children"></div>
</div>
CSS code :
#parent {
width: 200px;
height: 200px;
background: #ff0;
}
#children {
width: 10%;
height: 10%;
background: #f00;
}
Javascript code :
parent = document.getElementById('parent');
children = document.getElementById('children');
parent_height = parent.clientHeight;
children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";
I hope I could help you and say me if you have any other problem.
Your statement is absolutely right about the percentages coming from the very translated element. Instead of using translate property in your case you should be using absolute positioning to stay relative to the parent div. I absolutely positioned vertically your red div here:(don`t forget about adding position relative to the parent div.It has to be positioned other than static default):
js fiddle pen here
body {
margin: 0;
width: 100%;
height: 100%;
}
body > div {
width: 200px;
height: 200px;
background: #ff0;
position: relative;
}
body > div > div {
width: 10%;
height: 10%;
-webkit-transform: translateY(-50%);
background: #f00;
position: absolute;
top: 50%;
}
You can also use one extra block and use the transition for it except the child node
HTML code :
<div id="parent">
<div id="childrenWrapper">
<div id="children"></div>
</div>
</div>
css should be something like this
#parent {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}
#childrenWrapper{
width: 100%;
height: 100%;
}
#children {
width: 10%;
height: 10%;
background: #f00;
}
You can make the element absolute positioned and use left and top property to take the percentage value as parent.
Its forked with positioning required on the following URL
working sample
body {
margin: 0;
width: 100%;
height: 100%;
}
body>div {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}
body>div>div {
position: absolute;
left: 50%;
top: 50%;
width: 10%;
height: 10%;
background: #f00;
transform: translate(-50%, -50%);
}
notes :
you can absolute positioning of your red square by changing parent element to position relative
then using 50% top and 50% left will position red square according to its upper left corner
using transform:translate(-50%,-50%) will position red square according to its center
The solution to this problem is not to use translate at all. When you are translating an element, the percentage you select is based on it's own height.
If you want to position the element based on the parent's height, use top: 50%;
So the code will look like this:
body {
margin: 0;
width: 100%;
height: 100%;
}
body > div {
width: 200px;
height: 200px;
background: #ff0;
position: relative;
}
body > div > div {
position: absolute;
top: 50%;
width: 10%;
height: 10%;
/* -webkit-transform: translateY(50%); */
background: #f00;
}
I am looking to vertically center a <div> in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only). I have several constraints:
The div must be centered vertically in the viewport. Methods I have seen only support centering inside another <div>, which is not what I want.
The height of the div is not known.
Other constraints:
The div must be aligned to the right.
The div has a constant width.
The div must support padding.
Other elements will be placed on the web page. The div acts as a menu.
The div must support a background colour/image.
This gets me close to what I want, but not exactly:
#nav {
position: fixed;
right: 0;
top: 50%;
}
However, the top of the nav is in the middle, not the middle of the nav.
Is there some technique which allows me to center my div with these constraints?
What's that? Taking 8 years to get the answer to a problem is too much?
Well, better late than never!
You got really close to the solution. I'd do it with transform: translate():
#nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
According to Can I use?, it is supported by everything except for IE8- and Opera Mini (which, to be honest, is a pretty good support).
I'd recommend you overkill it a bit and just add all of the vendor prefixes (just to make sure!):
#nav {
position: fixed;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's a snippet to show it to you in action:
#nav {
right: 0;
top: 50%;
position: fixed;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #ccc;
padding: 20px;
}
<div id="nav">
ABC<br/>
DEFGH<br/>
IJKLMNO<br/>
PQRS<br/>
TUVWXYZ
</div>
Hopefully it's still relevant to you! (who am I kidding, it's been 8 years)
you can use this as one of the solution.
<style>
#containter {
height: 100vh; //vh - viewport height
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#content {}
</style>
<div id="containter">
<div id="content">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
If the item is set to position: fixed or position: absolute:
top: 50%; left: 50%; transform: translate(-50%, -50%)
If the item is set to position: relative, use:
margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%)
(More info at the source.)
Example:
Run the snippet and then resize this page (or rotate device). The box stays centered in the "snippet viewport".
.myContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid RebeccaPurple;
}
.myThing {
width: 100px;
height: 100px;
background-color: CornflowerBlue;
}
<div class="myContainer">
<div class="myThing myContents">
</div>
</div>
The easiest way is not to use a div - use a table with one row and one cell. Vertical alignment is woefully unsupported in CSS and you will find yourself coding up the wall and across the ceiling to accomplish it.
I understand the semantic argument against what I have just proposed - I am a proponent of semantic markup in most cases. However I also believe in using the right tool for the right job. I believe it is best to sacrifice a little purity in this case for a simple solution that will work.