Need a template for a page with one centered image

Forum|Forum|5 years ago
October 2, 2020
1 reply
395 views

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.)

This topic has been closed for replies.

Correct answer Nancy OShea

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 OShea

Community Expert

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— Product User & Community Expert

J

judyrossAuthor

Participating Frequently

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.

Nancy OShea

Correct answer

Community Expert

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— Product User & Community Expert

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