Streaming live at 10am (PST)

Aligning headline vertically with an image


#1

I've attached an image here. This is a div. There are three elements inside the div.

Icon - Floating Left
Headline - "Write Faster" - no changes
Paragraph - Cleared Floats

I'm trying to get the Headline to align vertically with the image. Right now it's aligned to the top of the image.

Thanks.


#2

Hi @joe_in_brooklyn,

It would be quicker if you could share your site like so: http://help.webflow.com/faq/general/how-do-i-share-my-sites-read-only-link

If I read correctly, you want to vertically align your Heading to the image (the one you attached). Achieving that, you will need to

  1. Set Body Height to 100%
  2. Give your Div either a % value or px value
  3. Set your Heading to a Block with Relative positioning and bring it down however you like

Or, after re-reading your question, if you want to align the heading to the icon, you just

  1. Give Heading a Relative position and adjust downwards accordingly

Hope this answers your question.


#3

Thanks. This is a company site so I can't share it publicly. What I've done is create something that looks like this:





I want the image to be an icon and the h2 to be aligned horizontally to the center of the image. Then I want the paragraph to start on a new line below.

I can float left the icon and the h2 then rises to the same line. But the h2 is aligned to the top of the icon. I want it aligned to the center of the icon.

Your solution for Relative Positioning works. But I have four divs and the icons are slightly different pixel sizes. So I then have to do this Relative Positioning for each Div. I'm hoping there is a more elegant solution.


#4

I was overthinking this.

Alternatively, you can remove the relative positioning, and add top and bottom margins.

Did a quick screencast here: http://quick.as/dX4LH3paz

I held down onto Alt key to achieve the moving of both Top and Bottom Margins at the same time.


#5

Thanks much. I was hoping there was a global command that would automatically horizontally align the headings in these repeated divs to the image on the left. I used Photoshop to manually move the middle heading - Easy to Use - where I want it to go. The others are where they currently show up in webflow. I know in HTML you used to be able to use the Vertical Align (or Horizontal Align) commands but I believe those have been deprecated.


#6

If you want the styles to be applied across the site for these headings, you may give them a specific class and the changes will be made.


#7

Great. And what style do I apply to the header e.g. (Easy to Use, Save and Share, Write Faster) in the example above so they will align horizontally with the icon on the left. Because each icon is a slightly different pixel height, I can't use relative positioning unless I do it individually for each header. I am looking for a global style.


#8

But don't I have to do that for each heading individually? Particularly if the icon is a different height. I'm looking for a global style that will just snap each heading into place aligned horizontally with the icon on the left. This seems like something that would be so easy to do.


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.