0

I know this question is coming up again and again. Vertical alignment in CSS seems to be a major issue...

I am trying to align the two texts (Kinesiologie Stammheim and Dies ist der Platzhalter für ein Zitat zum Thema Erde) in the head of this site to the middle: http://www.kine-stammheim.ch/ikmethode.html

My CSS file is here: http://www.kine-stammheim.ch/css/screen/screen-PAGE-layout.css

I tried all the different suggestions which google brings up, vertical-align:middle;, display:inline-block;, etc. but without success.

What is the correct way to vertical align these text to the middle?

Improve this question
12
  • 1
    give line-height: 120px; because the height of the parent element is 120px. this will work if you have a single line of text. Commented Oct 8, 2013 at 10:50
  • Just use line-height:120px as this is the height of your banner div. Commented Oct 8, 2013 at 10:51
  • loose the line-height or negative margin approach.. it's too specific. there is a better way to vertically center elements.. I'll post it shortly in the answers. Commented Oct 8, 2013 at 10:54
  • 1
    the only way to make vertical-align:middle; work properly is to use it with display:table-cell Commented Oct 8, 2013 at 11:13
  • 1
    @Pete the vertical-align property can be used to affect a set of inline or inline-block elements within the same block-level parent. That is a different concept than how vertical-align controls the behavior of content in a table-cell. Commented Oct 8, 2013 at 11:31

5 Answers 5

Reset to default
2

Pure CSS, Cross Browser, without specific margin, without absolute positioning and without setting the line-height

Check out this demo

HTML: (put everything you want inside Centered)

<div class="Container"> <div class="Centered"> <p>Herzlich Willkommen</p> <p>Hier entsteht der Webauftritt der Kinesiologie Stammheim.</p> </div> </div>

CSS:

.Container { height: 400px; /*For the demo*/ background-color: #d3d3d3; text-align: center; /*optional*/ } .Container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .Centered { background-color: yellow; display: inline-block; vertical-align: middle; }

Explanation: I'm adding an empty inline-block element (with 100% height) to the container, and making the Centered div to align with his middle (which is always the middle of the container)

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

yeah.. just saw that someone Downvoted you.. IDK why. you get a +1 from me.
I can't understand what you did.. css is full of hidden treasure. I love it. :)
Although this works for the #banner, I don't think it works for #logo? Or am I mistaken?
@danrhul it works with everything.. just use the layout smartly.
And it can't handle text wrapping onto new lines.
|
2

In light of your comments about multi-line text, if you add:

#parentElement { display: table; width: 100%; } #childElement { display: table-cell; vertical-align: middle; text-align: center; }

This will achieve what you are trying to do, with single, or multi line text. You need to replace #parentElement with your two parent elements: #banner, #logo and replace #childElement with your two child elements: #banner .quote, #logo .logo_text

Fiddle

Improve this answer

1 Comment

If the quote text is to wrap, then the table-cell approach is a good option.
1

You have to minor layout problems.

Here is how to fix the first one.

<div id="logo"> <img class="logo_img" src="../../images/logo.png"></img> <div class="logo_text"> … </div> </div> .logo_img { height: 100px; margin: 10px 20px 10px 0px; vertical-align: middle; } .logo_text { font-family: Arial,Helvetica,sans-serif; font-weight: 600; font-size: 133.33%; display: inline-block; line-height: 1.5em; vertical-align: middle; }

In the part related to #logo, do not float the img, keep it as an inline or inline-block element and set vertical-align: middle.

For .logo-text, add display: inline-block and vertical-align: middle.

This will position the image and text block in the vertical middle of the header block.

For problem two related to .quote,

<div id="banner"> <div class="quote"> … </div> </div> .quote { font-family: "Times New Roman",Times,serif; color: white; text-align: center; font-weight: bold; font-style: italic; font-size: 200%; line-height: 120px; vertical-align: middle; }

In this case set the line-height: 120px to match the height of the image which controls the height of the header block.

However, if the quote were to wrap onto a second line, this would not work well and a table-cell approach be better.

Here is the result using Firefox's code inspector:

enter image description here

Improve this answer

4 Comments

That is absolutely right, if the .quote line were to wrap, then there would be large interline spacing, a bit ugly. For a responsive design and a small screen, I would just use a table-cell (via media queries).
The solution for the logo works fine. However on small screens the logo_text drops below the logo. That's ok but it is hidden behind the menu. How can I make sure the div with the logo and the logo_text gets enlarged, so everything remains above the menu?
For a small screen (responsive design via media queries), I might set a min-width to #logo to retain enough horizontal space for the logo and the 2-line text block. You could also let the header take on a vertical format with #logo as the first line/section followed by the image/quote panel below it, again for a small screen. You have many options.
Hm, but then the #logo div moves behind the banner... How can I make sure divs do not overlap or cover each other?
0

Better declare you parent division as position:relative and child division as position:absolute, then you can easily adjust this.

Use Left, right, top, bottom to adjust anywhere you want.

Improve this answer

Comments

0

I think this code may help you, just edit these classes:

.quote { font-family: "Times New Roman", Times, serif; color: white; text-align: center; font-weight: bold; font-style: italic; font-size: 200%; line-height: 1.5em; vertical-align: middle; display: table-cell; /*added*/ } #banner { background-image: url(../../images/erde.jpg); background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; height: 120px; display: table; /*added*/ width: 100%; /*added*/ }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.