Position Text in an Image

Caspar, the Friendly Goat
Text in Top Center

The style sheet for the page above is shown below in red. The text can be placed in any position in the image box by making a few changes.

For example, to place the text at top-left, change text-align: center to left: 21% (or a value slightly over 20%) since the margin for the text box is 20%. To place the text at top-right, replace left: 21% with right: 21%.

If you desire the text on the bottom of the image box, replace top in the style sheet with bottom. To place the text in the center, give either top or bottom, whichever may be in use, a value or slightly under 50%. A bit of experimentation may be needed to get the text at the exact spot you want it.

h1 {
text-align: center;
}

p {
margin-left: 15%; margin-right: 15%;
}

.image-box {
  position: relative;
}

.text-position {
  position: absolute;
  top: 5px;
  text-align: center;
  width: 100%;
  font-size: 24px;
}

img { 
  margin-left: 20%;
  width: 60%;
  height: auto;
  opacity: 0.6;
}

nav {display: block; top: 10px; left: 0; width: 120px; height: 100px; position: fixed; border: 1px solid
 #888; padding: 5px; text-align: left; font-size: 20px; font-weight: bold; background-color: lightblue;
 color: #FFFFFF;} 
    
nav a:visited, nav a {display:block; border-top: none; border-bottom: none; text-align: left; 
text-decoration: none; line-height: 20px; color: #000000;}

nav a:hover {background:#AAAAAA; color:#FFFFFF;}