Tribute page trouble with vertical centering div

Tribute page trouble with vertical centering div
0

#1

Hi there, im doing my tribute page but im having problems trying to center the “quote” div in the page. Do you know what can i do? is there anything else i should change in my code?. Btw, Its also my first time and idk if im sharing it wrong.

https://codepen.io/Sperkajugglite/pen/GqRGKV

Thanks in advance, Santiago


#2

just create a row and column just for your quote then center the text :slight_smile: if you need help let me know :smile:


#3

Thanks Michael, can explain me how to do that?, i tried but it doesn’t seem to work. (im trying to put the text at the same height as the middle of my list)


#4

I created a video correcting some things and I am waiting for it to upload. Its taking so long so I will just explain it too you. Be right back.


#5

Your Code

`

A page about dogs...

Man's best friend

Golden retriever puppies

Taken from: http://science-all.com

` Change this to a container-fluid`
`Change this to col-xs-12 `

10 Reasons why dogs are awesome

`Add a row here` `Add a column-xs-6 here`
    `Remove class=" "`
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
`remove this row`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Click here to read more about this amazing creatures

`

New Code

`

A page about dogs...

Man's best friend

Golden retriever puppies

Taken from: http://science-all.com

10 Reasons why dogs are awesome

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
` `

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Click here to read more about this amazing creatures

`

Add This to Your CSS

.quote {

padding-top: 55px;
}


Let me know if this is helping you get the results that you are desiring.