How Can I Easily Make A Text Title In The Middle Of An Image

Okay so I have been doing some renovations to my website and I am trying to make it so on the home page you see several images and what I want to happen is that when you hover over

Solution 1:

Remember an important concept. Absolute positioned elements are positioned relatively the first ANCESTOR that has positon different from "static" Thus, to position your "strings" you need to

• wrap the images in a div
• make that div "position: relative"
• put the text in a div or a span or other container
• make the container "position: abolute"

This way you should not have problem with images staing one over another.

Solution 2:

.poster p {
position:relative;
top:50%;
transform:translateY(-50%);
}

This will position itself in the vertical center.

add the following to .poster:

text-align:center;