i use below css to center my div with absolute position:
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width: 121px;
height: 121px;
margin-top: -60.5px; /*set to a negative number 1/2 of your height*/
margin-left: -60.5px; /*set to a negative number 1/2 of your width*/
}
It works like magic.
But as you can notice, it has fixed width and height.
Now i have to use this same css but for my div which has no fixed width and height, as it uses responsive layouts.
I just want to know is there any simplest way to set my div width dynamically in css by javascript or so? i.e., it count my div width on page load and than set to a negative number 1/2 of your it in margin-left?
You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.
#example {
position: absolute;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
}
See this example working on this fiddle.
use to
display table-cell
as like this
Css
.parent{
display:table-cell;
width:400px;
text-align:center;
border:solid 1px red;
vertical-align:middle;
height:400px;
}
.child{
display:inline-block;
background:green;
}
HTML
<div class="parent">
<div class="child">i m child div</div>
</div>
Demo
I also had this problem trying to center captions of varying lengths in a slideshow.
To center an absolute positioned element that has a dynamic width you can use transform: translateX. With prefixes this works in most modern browsers. Like so:
div {
width: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); }
Assign a class to all the divs that you want positioned like that, and then just select all of them and do the calculations.
$("body").find(".center").each(function() {
$(this).css({
"margin-left": "-" + ( $(this).width()/2 ) + "px",
"margin-top": "-" + ( $(this).height()/2 ) + "px"
});
});
Though, beware that this is a bad way of doing things, mainly because it's slow, your containers are not flexible and if you don't wait for the centering you may have flashes of unformatted content.
Related
As demonstrated here. When changing the width/height of an element that is rotated by some angle. The element moves.
How is it possible to fix and preserve the position of the element at the bottom right or any other corner for that matter when the width or height of the element is changed. And without changing the transform origin.
CSS:
.test{
position: absolute;
top: 200px;
left: 200px;
width: 400px;
height: 200px;
background: red;
transform: rotate(120deg);
}
You can do that by absolutely positioning the .test object using percentages and then offsetting those with transform. By replacing your .test css with the css below you will make the center of the object align to the center of the container no matter what its size is:
.test{
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%) rotate(120deg);
width: 400px;
height: 200px;
background: red;
}
To not make the object centered you will have to play around with the percentages of the bottom, right and translate properties.
I have a div that is centered on the page and scales with viewport in a way that its aspect ratio (16:9) is maintained. The problem is, I want the font and content inside to scale with the div as it resizes, as well. Vmin works, for the most part, without issue. It would work perfectly if the aspect ratio of the div is 1:1 because vmin checks for the lesser value between height and width of the viewport directly, and you can't set a custom aspect ratio.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
.wrapper {
width: 95vw;
height: calc(95vw * 9/16);
max-height: 95vh;
max-width: calc(95vh * 16/9);
background: center;
background-color: blue;
background-size:contain;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#lorem {
color: aqua;
font-size:10vmin;
text-align:center;
position:absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
margin:auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p id="lorem">
This text should scale with div only.
</p>
</div>
</body>
</html>
https://jsfiddle.net/Addictorator/70fq44sv/2/
Resize the window vertically to see what I'm talking about.
I don't believe there is a way in pure css (but if there is, that would be most preferred), but I think it is possible in javascript using an event listener onresize of the div and scaling each element down separately by a ratio comparing original (or previous - storing it as a var) div height/width to current div height/width. Or it could try and replicate vmin behavior but with height set to a ratio in a way 16:9 is considered instead of 1:1, like what was done on div using css above. I would prefer pure js and no jquery if at all possible. I've tried doing this myself, but I'm rather amateurish when it comes to javascript.
Thanks in advance!
Please see a working codepen here.
The solution is quite simple. On window resize we return the clientHeight of the parent. by dividing the returned value we achieve an integer that is usable as a font-size. We then assign this to the p element.
I hope this solves your problem.
//assigns font-size when document is ready
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
var wrapperHeight = document.getElementById('wrapper').clientHeight;
var relativeFontSize = wrapperHeight / 10 + 'px'; //change 10 to any integer for desired font size
document.getElementById("lorem").style.fontSize = relativeFontSize;
}
};
//then on window resize
window.onresize = function(event) {
var wrapperHeight = document.getElementById('wrapper').clientHeight;
var relativeFontSize = wrapperHeight / 10 + 'px'; //change 10 to any integer for desired font size
document.getElementById("lorem").style.fontSize = relativeFontSize;
};
body {
background-color:white;
}
#wrapper {
width: 95vw;
height: calc(95vw * 9/16);
max-height: 95vh;
max-width: calc(95vh * 16/9);
background: center;
background-color: blue;
background-size:contain;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size:60px;
}
#lorem {
color: aqua;
text-align:center;
position:absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
margin:auto;
}
<div id="wrapper">
<p id="lorem">
This text should scale with div only.
</p>
</div>
I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image.
The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.
Here is the fiddle that has some fixup javascript to make it work: http://jsfiddle.net/d3y0b8bd/
The code below will work for smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)
But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
/*aesthetic*/
background-color: red;
}
.lightboxImg {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*aesthetic*/
background-color: blue;
}
html:
<div class="lightboxRoot">
<div class="lightboxImg">
<img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
</div>
</div>
here's a fiddle in which JS is updating the position of scrollTop and scrollLeft, so to set the scroll to center of img.
Figured it out, in retrospect kind of silly: Just make a containing div that can't get any larger than the parent element, and make sure that it has the overflow property set so it gets the scrollbars. then the image inside can get is big as it wants: http://jsfiddle.net/abrady0/d3y0b8bd/2/
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
/*aesthetic*/
background-color: red;
}
.lightboxContainer {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
overflow: auto;
/*aesthetic*/
background-color: blue;
}
and the html:
<div class="lightboxRoot">
<div class="lightboxContainer">
<div>
<img id="imgElt" src="foo"></img>
</div>
</div>
</div>
one thing to fix in this case is that I'd still like the div's scroll centered with pure CSS, but this is a good first step.
I Have a div as a circle, with the inner text showing values as percentage say(20%). The problem is the inner text is not displaying exactly at the center of the circle.
The inner text is a dynamic value based on some results in percentage. The radius of the circle is based on the percentage values returned as result.The percentage values returned should be displayed exactly at the center of the circle. Could Someone help me with this.
Thanks.
Heres the code,
<style>
#circle {
border: 1px solid red;
border-radius: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
background:blue;
}
</style>
<div id="circle"></div>
<script>
$(function(){
var maxWidth = 500, // This is the max width of your circle
percent = Number($('#result').text()); // This is the percentage value
percent = percent / 100;
$("#circle").css({
"width" : maxWidth * percent,
"height" : maxWidth * percent,
});
circle.innerText =$('#result').text() + "%";
</script>
You can add another DIV inside the circle which holds the text and add position: relative to #circle in the CSS. Also add this:
#circle>* {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
position: absolute and top: 50% / left: 50% will place the top-left corner of the inner DIV in the middle of the circle. The transform shifts it 50% of its own size to the left/top.
This work out for me.
display: table-cell;
vertical-align: middle;
You can check the fiddle:
http://jsfiddle.net/Pallab/zCfyV/embedded/result/