[Innovation Cloud] Questions regarding positioning the text in the footer


#1

Hello everyone,

In part 5 of this project, we are to add a new section

<div class="footer">..</div>

In the index.html tab, I added this:

<div class="footer">
    <div class="container">
        <p>© Innovation Cloud Conference</p>
    </div>
</div>

and color the background black. So in the style.css tab, I did this:

.footer {
    font-size: 14px;
    background: black;
    height: 80px;
    }
.footer p {
    color: white;
    margin: 0px;
    }

My question is, is there anyway to position the text so that it is positioned in the middle of the footer? At first, the text was located at the top right corner of the black footer bar, so I tried using:

.footer p {
    color: white;
    margin: 0px;
    vertical-align: middle;
    }

That didn't work, so I ended up using:

.footer p {
    color: white;
    margin: 0px;
    position:relative;
    top: 30px;
    }

It looks like it is positioned in the middle-left part of the footer, but I know it's most likely not perfect. If I were to replace the position:relative and top:30px, is there another way to do this? Or was I supposed to position the text in the index.html by giving it additional properties?

My questions might see rudimentary, but I've searched around a bit and haven't found relative answers. Please help! Anyone!


#2

Try this:

.footer p {
color: #fff;
font-size: 14px;
height: 80px;
line-height: 80px;
margin: 0px;
}


#3

@thecityofrome
Thank you! That worked perfectly.
I do want to clarify some things with you:

  1. I already set the height to 80px under the class 'footer' - do I
    still have to set the footer p{ ... to height: 80px again? or is it better to set the height under footer p{ ..} instead of footer {..} instead?

  2. Also, setting the line-height means that the height of the space the words
    are typed in are set to a certain height of X px, correct?

Again, thank you very much for your feedback.


#4

I defined the 80px in both the .footer and .footer p. Why? The .footer has a background color so it needs a defined height in order to display the background color. The height and line height work together in the .footer p. The height defines the total space I want it to occupy, which is the same as the .footer. The line height defines the area of type-able space so that way I'm able to center it vertically in my .footer.

Community is powerful.