Hey,
I want to align a paragraph vertically that has multiple lines so that line-height can’t be used. I tried to to it via a table and the vertical-align: middle but I didn’t succeed.
To see the problem please go to http://phermann.tk/new/ and then go to the last box and click on “creating graphics”. An additional box will appear above and thats where the problem is. The “Hello” text isn’t vertically aligned, but it should be.
I would be glad if you can spot the mistake!
Thanks. Paul.
Hi,
The table needs a height to match the height of the section you want to align with.
e.g.
.outerContainer{height:400px}
If you wanted automatic alignment then you would need the image and the text in adjacent display:table-cells in the same display:table element.
Okay so I have to add those 400px height to the outerContainer instead of the 100%. I have done it, but the paragraph still won’t align properly. I updated the website.
Hi,
Graphwrapper is max-width :800px and contains the image which is 50% width and then the outerContainer which you have set to max-width:510px (and width:100%).
800 parent
1 child 400px wide
another child 510px wide
510 + 400 = ???
You do the math 
(hint: max-width would need to be 400px) 
Okay I noticed the mistake lol. The outerContainer width had to be 50% to make it work. Thank you for helping!
I have no idea how to edit my last post to prevent a double post so I just put this into a new one. I tried to add some responsiveness to the layout and some more errors occurred. I updated the website again.
When resizing to 640px width, the images don’t float but center above the text, whereas the text doesn’t align right. The same problem comes up when you look into the web-section, I used the same structure there as I used in the graphic-section. Thank you for helping.
Hi,
You have set a height on .box of 600px so when the images are stacked they no longer fit inside .box and therefore overlap. Change .box to min-height:600px and remove the height.
.box{
width:100%;
height:auto;
min-height:600px;
}
As a rule of thumb you will rarely set heights for containers that hold content that may change. Use min-height instead or just pad out the box to start with (or use margins on the element) and no heights are needed.
I think the height was not the problem here, but it still was logical to fix it.
The problem is, that when you scale your browser window down to 640px width, the texts won’t align. They fit well under each other but the keep unaligned. I updated the site.
Edit: When you click on the icons, the animations look quite creepy because the box height adjusts when the items fadeIn, I would like the box to know how high it will become before it animates. The animations look creepy anyway, I don’t know why. The seem to lag, but they didn’t when I built the site offline…
Hi If yo mean you want the text centred at the smaller width then use margin:auto to centre the fixed width container you have.
e.g.
.innerContainer p{margin:auto}
Thank you for answering, I could fix the whole align problem now.
But since I set the .box height to auto, a white margin appears underneath the text about me with the desk as the background (it’s box nr. 2). I don’t know where this is coming from and the Safari Debug tool doesn’t show me either. Furthermore the first box is much higher as needed. When I focus the actual b1 div, a big white margin appears again under it. I updated the link again.
And the animations are still laggy, I searched for some answers on the web but since my code is actually really short I could not find a solution. I tested in Chrome and Safari with i5 dual core and 8 gb ram so my specs should be powerful enough to execute an easy animation in jQuery o.O
The white gap at the bottom is the bottom margin of the p element collapsing through n to the parent. Remove the margins from the p element in that section.
#metext > p{margin:0}
Margin between parent elements will collapse (at the top or the bottom) when there is no content that separates them. Collapsing margins are often misunderstood.
Regarding the animation lag then I’m not sure which ones you are referring to exactly. Jquery is always slightly laggy with animations but I do notice that you have some massive file size on some of your images that could be slowing things down. This image for example is over 1000k and an image that size should probably be about 40k. You have a few images like that so I would address those first.
Okay thanks. I always wanted to resize those pictures but I somehow forgot it. I changed the p margin thing and it works not, but the white gap underneath the headline with my name still exists. If there is a margin, why is Safari’s web dev tool not coming up with that?
HI,
Which element are you having problems with now exactly? The white gap has gone from the image.
If you are talking about extra space under the ‘Paul Herman’ text then that again is the default 1em bottom margin on the p element you are using (remove it with #paulh{margin:0}).
Sorry I thought I would have set it as a h1 -.-’
Thanks.
