Center elements inside div

HTML & CSS
,
1

I have a footer divided in two columns, by using div’s.

What I want is to align to the center vertically the content of both columns inside the footer.

My code is here: https://jsfiddle.net/w9Lyz0tf/

Recently I asked a similar question but refering to the nav, and based on that I tried to do the same with the footer, but it seems that I didn’t completely understand how to do it.

Hope you can help me. Thank you

2

Hi there jpyamamoto9,

try and keep your code as simple as possible - less HTML elements. :sunglasses:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen,projection,tv">
html, body {
    height: 100%;
    margin: 0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
body {
    position: relative;
 }
#footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #292f33;
 }
#footer span  {
    float: left;
    width: 50%;
    box-sizing: border-box;
    font-weight: bold;
    color: #fff;
    text-align: center;
 }
#footer span:first-of-type  {
    padding: 0.5em 0;
    line-height: 120%;
    font-size: 2em;
 }
#footer span:last-of-type  {
    padding: 1em 0;
    line-height: 240%;
    font-size: 1em;
 }
@media screen and (max-width: 30em) {
#footer span  {
    float: none;
    display: block;
    width: 100%;
  }
 }
</style>

</head>
<body> 

<div id="footer">
 <span>Element 1</span>
 <span>Element 2</span>
</div>
</body>
</html>

coothead

3

What I see is that in order for you to keep the elements centered, you used the line-height property. However, I can’t use it.
The thing is that I can’t change that much the html code.
Based on my previous example, is there a way to do it without changing too much the html structure? Thank you

4

Well, I haven’t given it any thought at all. :mask:

Personally, I don’t promote the use of HTML “code bloat”
and will not provide CSS code to encourage it. :unhappy:

Of course, others here may be more compliant than I. :wonky:

You will just have to wait and see. :winky:

coothead

5

Hi there jpyamamoto9,

I have just looked at your “fiddly thing” and noticed
that you have put an “h1 element” in the footer. :eek:

This element should go at the beginning of the
content and definitely not at the end. :unhappy:

Further reading:-

Heading elements

coothead

6

Hi jpyamamoto9,

I would use display:table and display:table-cell
Then you will be able to use the vertical-align property

This uses your existing html , but I would do away with the h1 in the footer, as coothead has pointed out :point_up:.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vertical-align</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 16vh;
    text-align: center;
    color: #FFF;
    background-color: #292F33;
}
.footer {
    display: table;
    width: 94%;
    max-width: 1024px;
    height: 100%;
    margin: 0 auto;
    /*padding-top: 1%;*/
}
.column {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    height: 100%;
    padding: 0 60px;
}

</style>
</head>

<body>
<footer>
    <div class="footer">
        <div class="column">
            <h1>Element 1</h1>
        </div>
        <div class="column">
            <p>Element 2</p>
        </div>
    </div>
</footer>
</body>
7

I realise that you may have only added position:absolute for the demo but generally you would not want to remove the footer from the flow because once you do that you have to control it explicitly all the time and that may be impossible in a fluid page.

You have also set a height on the footer and that is unwise because you don’t really know if that height will be enough to accommodate your content.

In your other thread you set a height on the header and I mentioned previously that it was a bad idea but you seem to be constructing a page that has many elements of fixed heights. I can’t tell if this is your intention but if you are trying to fill the viewport with elements of fixed height then it is unlikely to work out well for you. :slight_smile:

In 99.9% of cases you want content to dictate the height of your elements so that you don’t have to micro manage it at every step. If you are looking for a fixed footer then you need position:fixed or if you need a sticky footer then you need this method to accommodate fluid content.

Most of the time though as coothead said “try and keep your code as simple as possible”.:slight_smile:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.