CODEWITHSUNDEEP
htmlcssvertical-alignment
Reto
Reto

Reputation: 1552

CSS vertical alignment - once again

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?

Upvotes: 0

Views: 146

Answers (5)

avrahamcool
avrahamcool

Reputation: 14094

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)

Upvotes: 2

Marc Audet
Marc Audet

Reputation: 46785

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

Upvotes: 1

Mohsen Safari
Mohsen Safari

Reputation: 6795

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*/
}

Upvotes: 0

ediblecode
ediblecode

Reputation: 11971

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

Upvotes: 2

Vivek Kumar
Vivek Kumar

Reputation: 1282

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.

Upvotes: 0

Related Questions