Aligning Text On An Image

Report · Feb 04, 2019

Is there align text on an image so that it appears on the center left or center right side of an image? I was also wondering what code I should write if I want to align text between the center and left side of an image or the center and right side of an image?

Report · Feb 04, 2019

I recommend you use the image as a background and place your text on top using CSS for alignment.

Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist

Report · Feb 04, 2019

You use the images as backround in the section of the page you are working on - like the header or inside of a div. Do you know HTML and CSS? You really need to know these to design a webpage in Dreamweaver.

Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist

Report · Feb 04, 2019

I actually do know HTML and CSS. I never, however, added picture backgrounds to websites though.

Report · Feb 04, 2019

I'm only throwing this out to you, if you follow melissa's advice and learn css/html.

You could do this easily by making the layout, (or even just the required element) using flexbox. Using the image as a background image you would then only have to use the justify-content property in order to 'align' the text as required.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Report · Feb 04, 2019

Thank you for the resource

Report · Feb 04, 2019

tylern54478869 wrote
Is there align text on an image so that it appears on the center left or center right side of an image? I was also wondering what code I should write if I want to align text between the center and left side of an image or the center and right side of an image?

Can you provide an image of the layout you require? Don't know about anyone else but I'm finding it difficult to visualise exactly what you require in terms of the layout?

Report · Feb 04, 2019

As a quick example, a centered container over a fixed background image.

HTML and CSS Code:

<!doctype html>

<head>

<title>Fixed Background</title>

<style>

body {

margin: 0;

background: #000 url(https://placeimg.com/1000/700/nature) center center fixed;

background-size: cover;

font-size: 4.25vw;

}

.container {

background: rgba(24,3,3,0.5);

color: #EAEAEA;

padding: 5%;

width: 50%;

margin: 0 auto; /**with width, this is centered**/

line-height: 1.5

}

</style>

</head>

<body>

<h1>My Awesome Website</h1>

<h2>Some pithy slogan</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus harum pariatur placeat, minus rerum vero perspiciatis nostrum veniam soluta cupiditate ratione iure distinctio neque maiores numquam, molestiae voluptate ipsum unde!</p>

</div>

</body>

</html>

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