How to align things in the center without padding

Hi!

I’m new into Webflow and it’s great!
However, I’m a bit stuck when it comes to some design.

I want to create a simliar intro-site like this:

I just want the boxes, not the animations and succeeded with that. But I’ve got no clue how to make the icons and header text to stay centered without applying padding. The padding makes the text disappear and not fit size-wise in landscape or portrait mobile phone mode.

Somebody got any help on this?

Cheers!

http://spaceship.webflow.com/

https://webflow.com/design/spaceship?preview=5faa32886f5f9fb19ca095a8f06f384a

learn and enjoy =)

1 Like

Ah, brilliant! Thanks a ton! :smiley:

Another thing…
What about if i want, in addition, add a full width div at the very top and bottom of the page? Like an intro and a footer. I can’t seem to squeeze them in because its just lays on top of the boxes.

Put the 4 boxes in a section.
Make that section have a position:relative.
Give that section a height.
Make 2 new sections - One above and one below the 4 boxes section.

The best way to center elements using CSS is to set them to Display: Inline Block and have their parents be text align Center.

Another way is to set it to Display Block, then do margin left and right Auto. But then you would need for it to have a fixed with to do that.

1 Like

Watch the video tutorials at http://tutorials.webflow.com/. You will learn everything you need to build a site in webflow. Good luck!

@StevenP Here’s a quick tutorial on centering elements:

Allright, thanks a lot! I’ll check it out!