I have a <div> and a <p> inside the div containing some text.
Horizontal alignment is achievable using text-align:center property but I am not able to middle it vertically.
I ve checked other related solutions, but they are specific to that particular problem and not suited for any div size.
I need a solution that could possibly be suited for any div of varying dimensions (in my case it is 100% both width and height).
Here is my Fiddle
You can use top: calc(50% - 1em) on p to center it vertically.
p {
position: relative;
top: calc(50% - 1em);
}
The idea is to get the height of the text, divide it by 2 and use it in calc(50% - ****) when the page loads or the window is resized. Then find the rule for the p tag and modify the top property.
var p = document.getElementsByTagName('p')[0];
function doMath() {
var ss = document.styleSheets;
for (k = 0; k < ss.length; k++) {
var rules = ss[k];
for (l = 0; l < rules.cssRules.length; l++) {
var r = rules.cssRules[l];
if (r.selectorText == "p") {
r.style.top = 'calc(50% - ' + String(parseInt(getComputedStyle(p).height.slice(0, -2)) / 2) + 'px)'
}
}
}
}
doMath();
window.onresize = doMath;html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
}
#dvTxt {
background-color: lightblue;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
p {
position: relative;
top: calc(50% - 7.5px);
}<div id="dvTxt">
<p>This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered
vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want
it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is
my text. I want it to be centered vertically This is my text. I want it to be centered vertically This is my text. I want it to be centered vertically</p>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments