Streaming live at 10am (PST)

Center Of The Browser


#1

Hi There,

I just read so many forum posts about this topic that I even got more confused :/

Here's what I am trying to learn:

How to vertically center things like: Text, Images, and Buttons within a:

1) Section
2) Container
3) Column
4) Div Block

Here is a Text sample: http://jackaroocaravans.com/
Notice how the title "vintage era meets modern age" is centered right in the middle of the screen/browser. And if I resize, it maintains its position.

How can I achieve this, in the 4 scenarios listed above?

Thank you so much!


#2

To align them in any of the above listed scenarios what you have to do first is make sure the parent element is set to position:relative. Then take you 'text, button, image etc' and apply position:absolute and set it to the bottom. Then use a percentage to move it up! smile


#3

Hi Hamzter,

I think I got it, but lets recap... I want to learn this 100%...

Here's what I did:

1) Added a Section. Set position to Relative.
2) Add an H1 Heading within the Section. Set position to Absolute. Bottom. 50%.

Here is that: http://ezeday3.webflow.com/

3 Questions:

1) Did I follow your steps correctly?

2) If I resize the browser, the H1 heading still stays at the same position (height). How can I do it, so when resizing, the position moves to always be in the center of the browser window.

3) I added a 500px height in the Section, and I also gave it a yellow background color. How can I do it so the yellow would always take the entire browser size for that section? Makes sense? Here is an example, but with an image photo instead of a solid color. I guess it's the same, regardless of photo vs color... This is exactly what I want: http://elautobus.squarespace.com/.

Thanks so much!!!


#4

Hey I think you missed something. Make a public link so I can see!


#5

I think is now public smile
Let me know if good...


#6

There is a better way of doing it. Take any element. Set it to relative and then change the top to 50%. Then go down to Effects and under transforms choose move and choose -50% That will move it back so that the absolute center of the element is centered within the parent.


#7

DFink, thanks for joining my Topic...

I still need help, is not working frowning

http://centerthings.webflow.com/

I dont get why center an item or text is not as easy as it sounds... :/


#8

I can't open that in webflow. Please make your site public. Also, have you watched all the tutorial videos?


#9

public view is on. and it's CENTERED now =)


#10

If you also want your section to center vertically in the browser window, you will need to set the body height to 100% and then apply the same settings for vertical center to the section itself. Then as you resize the browser everything will fluidly recenter.


#11

I appreciate everyone helping here. but I will be 100% honest.

YES, I did watch all the beginner course videos.

YES, I did review all the similar forum posts.

YES, I did follow the steps that you guys explained above.

However, I have not yet figured what I wanted. I am still as confused as before starting this post.

All I wanted was to have a blank page, with a paragraph in the middle, that is centered to perfection, and maintains its center position if I resize the browser up or down.

That was all... Yet, so many options and steps...

IF anyone is kind enough to tell me, FROM SCRATCH, how to achieve this, with detailed steps, please go ahead...

THANK YOU SO MUCH !!!


#12

Here's from Fire-Dragon-DoL

http://jsfiddle.net/jFAjY/1/

But I'm not sure how are we gonna do this in webflow. I've tried in in WF, no luck :/ Give it a try, you might make it work with WF. But running it outside of WF, works great, and responsive too.

More samples.
http://instadesign.co.uk/absolutcenter/
http://www.flashjunior.ch/school/test/divcentering/


#13

I posted a public example of a very simple recommended approach to centering objects vertically and horizontally through a simple sub class that can be appended to any class. I use this approach because it is generic / abstracted and can be used over and over throughout a site on any basic block element.

https://webflow.com/website/center-all

You have to declare a body height = 100% if you want anything to center in the browser window. or to make an object fluid to occupy a percentage of the browser height dynamically on resize. Otherwise, if you are only concerned about applying fluid width this can be applied to any object that has a fixed pixel height.

I built every element using fluid percentages for width and height. Play with them to see the results. This sounds like the missing behavior you are after.

TIP: inset the cursor in any value setter number field in webflow. Hold shift on your keyboard and use the up and down arrow keys on your keyboard to change values at 10x. Without shift it increments at 1x. Try it when adjusting percentages. It gives me instant feedback and will help you to see the behavior.

Make a new page within this example document drag a div to the stage. Set it's class to the predefined .center-all class I have created. Look at the element properties highlighted in blue. These are the settings you need to replicate to build your own.

If any class is created in abstract (no other properties for any other characteristic) it can be appended / added / tacked on to anything and invoke its behavior added to the base class. In this case it centers anything you tag it with.

Hang in there @eze81/ Learning is often a chore for me. But it is worth it to learn the right way - it is powerful and builds momentum with each step you master and really understand.

I posted the example, because you can tweak, change and break stuff to see what attributes affect the outcome. Breaking stuff is how I learn and how I know something inside out. If videos are tough for you (crazy difficult for me) maybe this approach will help.


#14

I just realized you cannot add a second page, so I added one for you and placed a div with the .center-all class so you can easily see the properties highlighted in blue.


#15

Hey man, thanks a lot for your solution! I'll keep it in mind smile


#16

Dude... You Rock!!!

You really went above and beyond to help me here. I'll follow your advices.

Thanks again!!!!

I will IM you in a bit.


#17