H3 aligns the center right, need a fresh set of eyes

I have a potentially stupid question.

I have a violin with a block of welcome text coming out of the center. I usually have a good understanding of my own CSS, but that makes me completely chatty. I removed all excess margins and text alignment centers to make this clearer. In fact, you can delete the entire JS segment and set #welcome DIV opacity to 1 again for clarity.

http://jsfiddle.net/Imperative/29Aat/88/

Here is the relevant CSS:

html, body {
    height: 100%;
    margin: 0 auto;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#wrap {
    zoom: 1;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}
#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
}

I clearly lack something really beginner and really obvious, but I'm too close to this thing, and I completely miss the boat.

html, body, wrap #welcome ? - , , -, 50- ? frack?

+5
4

<nav> <li>. <ul>:

nav
  ul
    li
    li

: header , . overflow: auto, , :

header.topbar {
    overflow: auto;
    /* Get rid of this: height: 80px; */
}

, :

#welcome {
    text-align: center;
}

: http://jsfiddle.net/29Aat/103/

+3

, , . . : JSFiddle

:

nav {
    width: 100%;
}

#welcome h3 {
    text-align: center
}
+2

:

#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
    clear: both;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
    text-align: center;
}

, . H3 , .

: http://jsfiddle.net/Imperative/29Aat/102/

+1

HTML, , #wrap #welcome, ?

, stackoverflow, , , . , , .

html-, wrap-div -div.

, ? div text-align: center css, .


, :

1) Close the Wrap-div tag (I'm pretty sure that I managed to place it in the right place) 2) Change the CSS bank:

position: absolute;
opacity: 0;
top: 25%;
width:100%;
text-align:center;
0
source

All Articles