Highlighted

Aligning Text On An Image

New Here ,
Feb 04, 2019

Copy link to clipboard

Copied

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?

Views

168

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

Aligning Text On An Image

New Here ,
Feb 04, 2019

Copy link to clipboard

Copied

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?

Views

169

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
Feb 04, 2019 0
Adobe Community Professional ,
Feb 04, 2019

Copy link to clipboard

Copied

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

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...
Feb 04, 2019 1
Adobe Community Professional ,
Feb 04, 2019

Copy link to clipboard

Copied

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.

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...
Feb 04, 2019 1
New Here ,
Feb 04, 2019

Copy link to clipboard

Copied

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

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...
Feb 04, 2019 0
LEGEND ,
Feb 04, 2019

Copy link to clipboard

Copied

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/

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...
Feb 04, 2019 1
New Here ,
Feb 04, 2019

Copy link to clipboard

Copied

Thank you for the resource

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...
Feb 04, 2019 0
LEGEND ,
Feb 04, 2019

Copy link to clipboard

Copied

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?

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...
Feb 04, 2019 0
Adobe Community Professional ,
Feb 04, 2019

Copy link to clipboard

Copied

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

HTML and CSS Code:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Fixed Background</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<div class="container">

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

<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, 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...
Feb 04, 2019 1