Streaming live at 10am (PST)

Centering Tab Menu


#1

I cannot for the life of me figure out how to center this tab menu.

The problem really shows up in landscape mode. It looks good at at 450px but at 700px it doesn't at all.

I have the margins set to auto but it does not center.

Thanks for any help!

its the page called "post title name"

https://preview.webflow.com/preview/travisbklein?preview=c9a223b9ad616b860ba1acc25a62ff34

edit: forgot to post the gifs,

this is one at the bottom, the sharing div


#2

Select the container of the buttons and set text align on center should do the trick


#3

Wow thank you so much @Joscreative ! I had no idea that the text align would affect the divs, cool.

The bottom share buttons I figured out had to be set to to inline block after I inspected the published menus's and saw their inline block.

But now a small new problem, the last block, the comments one, just does not want to play right!


#4

Useing the text alignment will only work on divs set to inline block.

The orginal centering merhod only works on block divs that are given a width.


#5

that is a lesson I will not forget, and makes sense.

so they are set to inline block and text centered, but for some reason the last block just decides to be pushed down for a reason I cannot figure out.


#6

Hi @TravisBKlein, it looks like the read-only link is no longer working. Could you check that and repost the link to the site?

Thanks in advance :slightly_smiling:


#7

First of all thank you Dave, don't thank me, I'm the newbie learning how to build a website with your AWESOME Webflow.

this is the share link, I think it got messed up when I renamed the url:
https://preview.webflow.com/preview/travisbklein?preview=c9a223b9ad616b860ba1acc25a62ff34

I updated the first post with it also, thanks dave really interested why this is happening.


#8

Hi, and welcome to Webflow! The best way to deal with tabs is to use percentage widths. So for 3 tabs, I like to do 32% width which will add even spacing between them as well. You can fiddle with the percentages while working. Also keep in mind not to select the active tab because you will be styling only that one, you want to style the inactive tab so that the style cascades down to the active one as well. Hope that helps.


#9

ok cool nice, thanks @DFink. I used the %'s like you suggest and it looks great!

But I still can't figure out the mysterious spacing of my 3rd item called comments.

These are not menu items. just divs.


#10

Hi @TravisBKlein, I took a quick peek, and it looks like the share buttons on mobile landscape are set with display inline block and float off. I would suggest to change it so that the FB and Twitter share buttons are set with float left, and the comments button to float off.

Then to center those, select the parent post footer share div, and set that to a width of 84% to center the div on the page.

Result:

Could you try that and see if it helps? Let me know if any Q's :slightly_smiling:


#11

Hey @cyberdave, I did that but the 84% makes the div not large enough and it pushes the comments one to the bottom:

I just put relative offset of 13px on the comments one to push it up, but wish I knew why I needed to do that if they are all set to inline block, no float.


#12

#14

#15

#16

#17

It seems like you got it to not drop into the second row. You still have a 2% margin on both the inactive, and the active tab. I'd remove both of those, and add a 1% margin to both sides of the inactive tab. It pulls to the right because you have the margin only on the left side. I'd also remove all the positioning styles to the active tab except for the color change/active state look that you want.


#18

I got the comments share button to line up only because I added an awkward 13 pixel positioning to it, which I just don't understand the reasoning for it, like why it isn't just lined up without the 13 pixel change.

I mean I'm totally cool with the 13 pixel offset just kinda confusing ya know.

AHH the tab buttons yea that did work perfect and I should of thought of that about evening the margins to match eachother instead of just playing around with what could work. Thank you @DFink!


#19

Sure, let us know if you need anymore help and welcome to Webflow! Also, if you haven't already, I strongly recommend working your way through watching all the videos over at http://help.webflow.com/courses and on Webflow's Youtube page. They seriously helped me master Webflow when I started in just a few hours! Good Luck!


#20