Highlighted

Need a template for a page with one centered image

Explorer ,
Oct 02, 2020

Copy link to clipboard

Copied

I'm a print designer, and I need help doing something that should be easy but I can't figure out how to do it. All I want is to create a simple page with a horizontally centered image (a jpg of the layout that someone else will code) as a clent preview. In "olden" days, I could use an align center tag, but that's not an option any more. And I'm getting very frustrated trying to figure out how to do it with DW 2020 (part of my CC subscription). Code is not my friend: can anyone help me? (I'd be happy to answer any InDesign questions you might have in exchange.)

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

To center horizontally, you need 3 things:

1.  a doctype declaration on line #1 which DW does for you when you create a new document.

2. a stated width in pixels, percentages, ems or whatever...

3. a CSS left and right margin of auto.

 

To keep this responsive, I used % widths.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Centering 101</title>
<style>
body {
width: 95%;
margin: 0 auto;
text-align: center;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Your Images Here</h3>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
</body>
</html>

 

 

Views

73

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

Need a template for a page with one centered image

Explorer ,
Oct 02, 2020

Copy link to clipboard

Copied

I'm a print designer, and I need help doing something that should be easy but I can't figure out how to do it. All I want is to create a simple page with a horizontally centered image (a jpg of the layout that someone else will code) as a clent preview. In "olden" days, I could use an align center tag, but that's not an option any more. And I'm getting very frustrated trying to figure out how to do it with DW 2020 (part of my CC subscription). Code is not my friend: can anyone help me? (I'd be happy to answer any InDesign questions you might have in exchange.)

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

To center horizontally, you need 3 things:

1.  a doctype declaration on line #1 which DW does for you when you create a new document.

2. a stated width in pixels, percentages, ems or whatever...

3. a CSS left and right margin of auto.

 

To keep this responsive, I used % widths.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Centering 101</title>
<style>
body {
width: 95%;
margin: 0 auto;
text-align: center;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Your Images Here</h3>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
</body>
</html>

 

 

Views

74

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
Oct 02, 2020 0
Adobe Community Professional ,
Oct 02, 2020

Copy link to clipboard

Copied

CSS Flexbox, responsive horizontal and vertical centering.

Live example on JS Fiddle

https://jsfiddle.net/NancyO/pqhoc5r3/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered with CSS Flexbox</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;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
/** font size grows 1px for every 100px of viewport width **/
font-size: calc(16px + 1vw);
/** line-height grows with font size **/
line-height: calc(1.1em + 0.5vw);
/**change background image to one of your own **/
background: url(https://placeimg.com/1200/1200/nature) center center fixed;
background-size: cover;
}

/**Adjust values to suit**/
main {
background: rgba(0, 0, 0, 0.60);
width: 75%;
color: #EAEAEA;
padding: 10%;
}
</style>
<body>
<main>
<h3>Welcome to CSS Flexbox</h3>
<p>This space is horizontally and vertically centered on screen.</p>
</main>
</body>
</html>

 

Post back if that's not what you want.

 

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...
Oct 02, 2020 0
Explorer ,
Oct 02, 2020

Copy link to clipboard

Copied

Thanks for responding. What you did is too fancy! All I want is a way to have a jpg that's horizontally centered, aligned to top (will need to stack a few of them on top of each other). Don't need any text, any tints. I think maybe I need to create a DIV that will horizonally align images put into it, but I can't figure out how. It's purpose is just to do a rough mockup for the client to view on screen.  

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...
Oct 02, 2020 0
Adobe Community Professional ,
Oct 02, 2020

Copy link to clipboard

Copied

To center horizontally, you need 3 things:

1.  a doctype declaration on line #1 which DW does for you when you create a new document.

2. a stated width in pixels, percentages, ems or whatever...

3. a CSS left and right margin of auto.

 

To keep this responsive, I used % widths.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Centering 101</title>
<style>
body {
width: 95%;
margin: 0 auto;
text-align: center;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Your Images Here</h3>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
<p><img src="https://dummyimage.com/900x900" alt="placeholder"></p>
</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...
Oct 02, 2020 0
Explorer ,
Oct 02, 2020

Copy link to clipboard

Copied

That's it!!!! Thank you so much!

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...
Oct 02, 2020 0
Adobe Community Professional ,
Oct 02, 2020

Copy link to clipboard

Copied

You're welcome.  Glad to be of help.

 

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...
Oct 02, 2020 0