Highlighted

CSS vertical centering code

New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

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
 
 
 
TOPICS
New user

Views

406

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CSS vertical centering code

New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

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
 
 
 
TOPICS
New user

Views

407

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 24, 2020 0
Most Valuable Participant ,
Mar 24, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0
New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0
Adobe Community Professional ,
Mar 24, 2020

Copy link to clipboard

Copied

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.

CSS GridsCSS Grids

 

 

<!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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0
lourera LATEST
New Here ,
Mar 24, 2020

Copy link to clipboard

Copied

thank you. I'll try this...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0