Text won't align under image in CSS

Question

I have been trying to follow other guides and working on it myself to see what is interfering with the text being unable to align underneth the image.

Any chance anyone has delt with a similar issue?

HTML

  
    
    
    Some text

In the CSS the #cf img is interfering with allowing the text to align below it

CSS

#cf img {
  position:absolute;
  background-color: #bbb;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  display: block;
  margin: auto;
  width: 100%
}

Here is the code https://jsfiddle.net/Kalilath/ry2aoxc5/1/

user_1969888 · Answer

Updated for the updated question: If you want to centre an item above an absolutely positioned element, you can use the following (and make sure the parent element has position:relative as its attribute):

#cf p {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

If you want to stack your images on top of each other and keep everything in your #cf container centred, use display:flex on your container.

flex-direction set to column will stack everything in your container vertically, and align-items set to center with align everything horizontally in the middle.

#cf {
  display:flex;
  flex-direction:column;
  align-items:center;
}


    
    
    Some text

Text won't align under image in CSS

1 Answers