CODEWITHSUNDEEP
htmlcss
MattM
MattM

Reputation: 3217

CSS Content Position

I am programming in Squarespace and would like to add some copyright text and logo after the footer. Since I can't use HTML to do this without upgrading to their developer version I am trying to do this completely with CSS.

The Footer HTML code is:

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

My CSS is: 

#footer::after{
  height:290px;
  background-image: url("logo-image-link");
  background-repeat:no-repeat;
  background-position: 50% 20%;
  width:100%;
  background-size: 397px 200px;
  content:"Copyright 2014 • Need 2 Speed • All Rights Reserved.";
}

The problem that I have is the phrase in content: sits at the top left of the area I am creating after the footer. I would like it to be centered at the bottom. Is there a way to do this?

You can see it on the site here: http://www.n2sreno.com/

Upvotes: 0

Views: 299

Answers (2)

Michał Baryś
Michał Baryś

Reputation: 66

You can use text-align: center and padding-top instead of height.

#footer::after {
  background-image: url("//static1.squarespace.com/static/5228c3b2e4b03f96f1b788e3/t/526ea98ee4b094e3038f506c/1437697275836/?format=1500w");
  background-repeat: no-repeat;
  background-position: 50% 20%;
  width: 100%;
  background-size: 397px 200px;
  content: "Copyright 2014 • Need 2 Speed • All Rights Reserved.";
  text-align: center;
  padding-top: 240px;
}

Upvotes: 2

TomHunt
TomHunt

Reputation: 11

Add the property "align: center" to these classes.

.cf::before, .cf::after {
    content: " ";
    display: table;
    **text-align: center;**
}

Upvotes: 1

Related Questions