Need a template for a page with one centered image

Report · Oct 02, 2020

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

Report · Oct 02, 2020

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 & Moderator

Report · Oct 02, 2020

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.

Report · Oct 02, 2020

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 & Moderator

Report · Oct 02, 2020

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

Report · Oct 02, 2020

You're welcome. Glad to be of help.

Nancy O'Shea— Product User, Community Expert & Moderator

Need a template for a page with one centered image

1 Correct answer