• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CSS vertical centering code

New Here ,
Mar 24, 2020 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
 
 
 

Views

559

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
community guidelines
Community Expert ,
Mar 24, 2020 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

Votes

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
community guidelines
New Here ,
Mar 24, 2020 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

Votes

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
community guidelines
Community Expert ,
Mar 24, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Mar 24, 2020 Mar 24, 2020

Copy link to clipboard

Copied

LATEST

thank you. I'll try this...

Votes

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
community guidelines