CODEWITHSUNDEEP
htmlcssvertical-alignment
Roland
Roland

Reputation: 1940

Centering Div Element vertically

I am working on a very basic website template with a fixed header at the top left and a fixed bottom line at the bottom left and right.

The content in the middle is supposed to be centered and I just can't quite figure out what I am doing wrong.

Question 1.) Why does vertical centering not work if I remove the height: 100% css property?

Question 2.) When height: 100% is declared on the html tag, why is the site bigger than 100% and extends beyond the browser window?

Question 3.) Why is bottom-left displayed correctly, but not bottom-right?

Question 4.) If with is set to 100% and text align to right, shoulnd't text start at the right browser frame and extend to the left? why is it extending the browser windows?

Thanks so much for helping out. Code is visible below

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height:100%;
}

body {
    height: 100%;
    margin-left: 20px;‚
}

.title {
    position: absolute;
    top: 20px;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}

/* Center Text Section */

.area {
  width: 100%;
  height: 100%;
  position: relative;
}

.middlespace {
  position: absolute;
  left: 50%;
  top: 50%;
  display: table;
}

.middlespace p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.exhibitionindex {
    text-align: center;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
}

.bottom-left {

    position: absolute;
    bottom: 15px;
    text-align: left;
}

.bottom-right {
    position: absolute;
    bottom: 15px;
    text-align: right;
}

.exhibitiontitle {
    color: #d4d4d4;
    font-style: italic;
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
}

.bold {
    font-family: serif;
}


.about {
    font-size: 11px;
}

.contact {
    font-size: 11px;
}

.openinghours {
    font-style: italic;
    color: #8e8e8e;
    font-size: 11px;
}

</style>

<title>Website Title</title>

</head>
<body>
    <div class="title">Logo / Title Text</div>

    <div class="area">
        <div class="middlespace">
            <p>27. April 2012</p>
        </div>
    </div>
    <div class="bottom-left">
        <span class="about"><span class="bold">XYZ</span> is a project by Person One, Person Two, Person Three&nbsp;&nbsp;&#124;&nbsp;</span>
        <span class="contact">Website Information &mdash; <a href="mailto:[email protected]">[email protected]</a></span>
    </div>
    <div class="bottom-right"><span class="openinghours">Opening Hours Information</span></div>
</body>
</html>

Upvotes: 0

Views: 260

Answers (1)

Jeff B
Jeff B

Reputation: 30099

Question 1.) Why does vertical centering not work if I remove the height: 100% css property?

By default, the html and body elements expand height to fit their content. So, without setting the height, your html is only as tall as it needs to be to contain the content as styled. In addition absolutely positioned elements do not affect the size of their parents. Without setting the height to 100%, area will not be the full height of your window either, so you will be vertically centering in a small strip at the top of your page.

Question 2.) When height: 100% is declared on the html tag, why is the site bigger than 100% and extends beyond the browser window?

That alone will not extend beyond the page boundaries. However, if you add margins, borders, or similar attributes to 100% elements, these are added in addition to the 100%, making your elements extend past the edge of the window.

Question 3.) Why is bottom-left displayed correctly, but not bottom-right?

You are absolutely positioning these elements. Div elements are generally 100% the width of the parent element. However, when you absolutely position them, their width shrinks to fit the content. In your case, you are trying to text-align within a div that is left-aligned by default. Because the div is only as big as the text, left, right, and center alignment all look the same. Because you are already absolutely positioning the divs, just use absolute positioning to align them:

.bottom-left {
    position: absolute;
    bottom: 15px;
    left: 15px;
}
.bottom-right {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

Upvotes: 3

Related Questions