The wrapping element needs to be displayed as "table cell" and the vertical-align has to be set to "middle"
code:
<div class="spec">
<p> The wrapping element needs to be displayed as "table cell" and the
vertical-align has to be set to "middle"</p>
<div class="verticalcenter">
<img src="../images/cartoon.jpg" alt="centered image" width="40%" height="auto"/>
</div>
</div>
<style>
.verticalcenter {display: table-cell; margin: 5vw; border: 0.5vw solid blue; width: 20vw;
height: 20vw; vertical-align: middle; background-color: skyblue;}
</style>
use "transform" or "flex" to center an element
"Positioning" and the "transform" property are used to vertically and horizontally center the div element:
I am vertically and horizontally centered.
Flexbox: a container with both the justify-content and the align-items properties set to center will align the item(s) in the center (in both axis).
I am vertically and horizontally centered.
code:
<div class="spec">
<p class="property">"Positioning" and the "transform" property are used to
vertically and horizontally center the div element:</p>
<div class="container">
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</div>
<p class="property">Flexbox: a container with both the justify-content and
the align-items properties set to <em>center</em> will align the item(s)
in the center (in both axis).</p>
<div class="center2">
<p>I am vertically and horizontally centered.</p>
</div>
</div>
<style>
.property{margin-left: 1vw;}
.container{margin-left: 1vw; height: 10vw; position: relative; border: 0.3vw solid green;
background-color: skyblue;}
.center{margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.center2{margin-left: 1vw; display: flex; justify-content: center; align-items: center;
height: 10vw; border: 0.3vw solid green; background-color: skyblue;}
</style>
find the position of an HTML element with "offsetTop"
Click the button
code:
<div id="target-a">
<p>Click the button</p>
<button onclick="getPointA()">Click</button><br><br>
<p id="output-a"></p>
</div>
<script>
function getPointA() {
var target = document.getElementById("target-a");
var output = document.getElementById("output-a");
output.innerHTML = "offsetTop: " + target.offsetTop;
}
</script>
find the position of HTML element with "offsetLeft"
Click the button
code:
<div id="target2">
<p>Click the button</p>
<button onclick="getPoint2()">Click</button><br><br>
<p id="output2"></p>
</div>
<script>
function getPoint2() {
var target2 = document.getElementById("target2");
var output2 = document.getElementById("output2");
output2.innerHTML = "offsetLeft: " + target.offsetLeft;
}
</script>
get the coordinates of an element
Click the button
code:
<div id="target3">
<p>Click the button</p>
<button onclick="getPoint3()">Click</button><br><br>
<p id="output3"></p>
</div>
<script>
function getPoint3() {
var target3 = document.getElementById("target3");
var output3 = document.getElementById("output3");
output3.innerHTML = "Coordinate of the element: " + "(" + target.offsetLeft + ", " +
target.offsetTop + ")";
}
</script>
find the position of HTML element with "getElementById()"
Click the button
code:
<div id="target">
<p>Click the button</p>
<button class="spec" onclick="getPoint()">Click</button><br><br>
<p id="output"></p>
</div>
<script>
function getPoint() {
var target = document.getElementById("target");
var output = document.getElementById("output");
output.innerHTML = "Co-ordinates of the element (left, top):" + "
(" + target.offsetLeft + ", " + target.offsetTop + ")";
}
</script>
find the position of HTML element with "getBoundingClientRect()"
code:
<div>
<div id="try"></div>
<div id="data"></div>
</div>
<style>
#try{width: 20vw;height: 20vw; padding: 20px; margin: 10px auto; background: skyblue;}
</style>
<script>
let elem = document.querySelector('#try');
let rect = elem.getBoundingClientRect();
for (var key in rect) {
if(typeof rect[key] !== 'function') {
let para = document.createElement('p');
para.textContent = `${ key } : ${ rect[key] }`;
document.getElementById("data").appendChild(para);
}
}
</script>
find the position of HTML element with "getBoundingClientRect()"
Return the top-left corner of this element relative to the top left corner of the viewport with the button below.
Also try to use the scrollbars to test the method for different positions.
code:
<div class="spec">
<div style="margin-left: 1vw; height:20vw; width:30vw; overflow:auto;">
<div id="myDiv" style="width:25vw; height:15vw; border:1px solid red;">
Return the top-left corner of this element relative to the top left corner of the viewport
with the button below.<br>
Also try to use the scrollbars to test the method for different positions.
</div>
<div style="width:1000px; height:1000px;"></div>
</div>
<br>
<button onclick="myFunction()">Get top-left corner + witdth and height of the element
with red border</button>
</div>
<script>
function myFunction() {
var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();
x = rect.left;
y = rect.top;
w = rect.width;
h = rect.height;
alert ("Left: " + x + ", Top: " + y + ", Width: " + w + ", Height: " + h);
}
</script>
find the position of HTML element with "getBoundingClientRect()"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
code:
<div class="spec">
<div style="margin-left: 5vw; height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
</div>
</div>
<button onclick="RectInfo()">get info</button>
<p id="Sample"></p>
</div>
<style>
#DIV1{width:35vw; height:25vw; border:2px solid blue; color:red;}
</style>
<script>
function RectInfo() {
document.getElementById("Sample").innerHTML="";
var d = document.getElementById("DIV1");
var Rect = d.getBoundingClientRect();
rl = Rect.left;
rt = Rect.top;
rw = Rect.width;
rh = Rect.height;
document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: "
+ rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
}
</script>
style the "position" property
change the position of a <div> element from relative to absolute
This div element is placed 2vw from the top of its original position.
Click the button to set the position property to "absolute" and see what happens.
1/return the property: object.style.position; 2/set the position property: object.style.position = "static | absolute | fixed | relative | sticky | initial | inherit"
This DIV element is placed 2vw from the top of its original position.
Click the button to set the position property to "absolute" and see what happens.
It will then be placed 2vw from the top of the page.
code:
<div>
<button onclick="changePosition()">Try it</button>
<div id="pos1" class="spec">
<p>This DIV element is placed 2vw from the top of its original position.</p>
<p>Click the button to set the position property to "absolute" and see what happens.</p>
<p>It will then be placed 2vw from the top of the page.</p>
</div>
<style>
#pos1{border: 0.2vw solid black; background-color: yellow; width: 20vw; height: 10vw;
position: relative; top: 2vw; margin-bottom: 3vw;}
</style>
<script>
function changePosition(){
document.getElementById("pos1").style.position = "absolute";
}
</script>
using different position types
I am a div element.
code:
<div>
<div id="pos2" style="top:5vw;left:10vw;">I am a div element.</div>
<select onchange="selectPosition(this);" size="5">
<option>absolute
<option>fixed
<option>static
<option>relative
<option>sticky
</select>
</div>
<style>
#pos2{color: red;}
</style>
<script>
function selectPosition(x) {
var whichSelected = x.selectedIndex;
var posVal = x.options[whichSelected].text;
var elem = document.getElementById("pos2");
elem.style.position = posVal;
}
</script>
1/ relative to the window : clientX/clientY; 2/relative to the document : pageX/pageY.
The element.getBoundingClientRect() method returns window coordinates for a minimal rectangle that encloses "element" as an object of built-in "DOMRect" class. Main DOMRect properties: x/y, width/height, top/bottom, left/right.
example to demonstrate how bounding client rect is changing when document is scrolled.
image with a default alignment.