CSS vertical centering code

Forum|Forum|5 years ago
March 24, 2020
2 replies
676 views

I need to position a paragraph vertically centered to all ebook readers. I added this code to a paragraph style in CSS to center a single line of text:

margin: 50vh 0 0 0; /* vh stands for viewport height*/

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

This worked perfectly.

Does anyone have the code for vertically centering a multiline paragraph added to the paragraph style? I apologize, I am not a programmer.

Thank you!

LR

New user

This topic has been closed for replies.

Nancy OShea

Community Expert

Which software are you using?

Depending on which devices and browsers you are targeting, modern CSS flexbox or CSS grids can do this quite nicely. Below is a CSS Grid example.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids - vertical centering</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
main {
padding: 2%;
width: 80%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
}
</style>
</head>
<body>
<main>
<h3>Welcome to CSS Grids!</h3>
<p>I'm vertically &amp; horizontally centered text over a full-sized page background image.</p>
</main>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

L

loureraAuthor

Participant

thank you. I'll try this...

John T Smith

Community Expert

Adobe currently has 23 programs included in a full Cloud subscription
Please post the name of the Adobe program you use so a Moderator may move this message to that forum

L

loureraAuthor

Participant

Sorry... I am using INDESIGN CC, but I am editing the output as epub folder in Dreamweaver CC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded