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?
Copy link to clipboard
Copied
I recommend you use the image as a background and place your text on top using CSS for alignment.
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.
Copy link to clipboard
Copied
I actually do know HTML and CSS. I never, however, added picture backgrounds to websites though.
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.
Copy link to clipboard
Copied
Thank you for the resource
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?
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>