CSS vertical centering code

4 replies
704 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

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>

Translate

Nancy O'Shea— Product User & Community Expert

L

loureraAuthor

Participant

thank you. I'll try this...

Translate

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

Translate

L

loureraAuthor

Participant

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

Translate

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.