How do I align my text "Created by Derrick Ogole Web Services" to the bottom right of my footer and still have "Copyright © 2022 Jessica Smith" still horizontally and vertically centred in the footer?
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
}
.copyright {
text-align: center;
}
.copyright-creator {
text-align: right;
padding-right: 30px;
}<section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>Here is my codepen: https://codepen.io/derrickogole/pen/GRQwqxZ
CodePudding user response：
You can add position: relative to the parent (.footer-section) and use absolute positioning to align .creator-container to bottom right.
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
position: relative;
}
.copyright {
text-align: center;
}
.creator-container{
position: absolute;
bottom: 0px;
right: 5px;
}<section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>CodePudding user response：
You can use for example absolute positioning of the creator-container:
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
position: relative;
}
.copyright {
text-align: center;
}
.copyright-creator {
position: absolute;
bottom: 0;
right: 0;
padding-right: 30px;
}<section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>CodePudding user response：
Instead of setting your padding in the footer-section, set it in .copyright.
.footer-section {
background-color: #000;
color: #fff;
}
.copyright {
text-align: center;
padding: 80px 0;
}
.copyright-creator {
text-align: right;
padding-right: 30px;
}<section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>EDIT
.copyright text will only be centered with itself but not with the whole footer.
I was looking to avoid the use of position:relative and position:absolute because if you add more content, you risk to make elements on top of each other.
.footer {
background-color: #000;
color: #fff;
position: relative;
}
.content {
text-align: center;
}
.absolute-content{
background-color:orange;
position: absolute;
top: 10px;
left: 10px;
}<div >
<div >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat enim nulla, a volutpat leo bibendum at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas accumsan magna ut nunc lobortis viverra. Phasellus in bibendum est. Vivamus tempor metus et mauris convallis tincidunt. Nam nunc odio, accumsan in urna id, vulputate molestie turpis. Nullam accumsan dolor non enim feugiat, at interdum turpis semper. Duis ut sapien at sem facilisis aliquet. Pellentesque molestie, lacus sed rutrum facilisis, justo dui pharetra lacus, ut tincidunt odio metus mollis mauris.</div>
<div >absolute</div>
</div>CodePudding user response：
For example you could define your container as display: grid using 3 equally sized columns like this:
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.copyright {
text-align: center;
}
.copyright-creator {
text-align: right;
padding-right: 30px;
}<section >
<div></div>
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>CodePudding user response：
You can use a grid for the footer-section
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
/* Added */
display: grid;
}
.copyright {
/* Added */
place-self: center;
}
/* Added */
.creator-container {
place-self: end;
}<section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>CodePudding user response：
I don't think any of the other answers quite got it right. Take a look at the example below and let me know if this what you wanted
body { margin: 0 }
* { box-sizing: border-box }
.footer-section {
background-color: #000;
min-height: 200px;
color: #fff;
padding: 2rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 1fr;
}
.copyright, .creator {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
}
.copyright {
place-self: center;
}
.creator {
place-self: end;
}<section >
<div >Copyright © 2022 Jessica Smith</div>
<div >Created by Derrick Ogole Web Services</div>
</section>CodePudding user response：
Use position: absolute for both:
.footer-section {
background-color: #000;
position: relative;
height: 100vh;
color: #fff;
}
.copyright {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
.creator-container {
position: absolute;
bottom: 0;
right: 0;
}<section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>CodePudding user response：
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
}
.copyright {
text-align: center;
}
.copyright-creator {
position:relative;
display:flex;
flex-direction:row;
justify-content:right;
top:95px;
} <section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>CodePudding user response：
.footer-section {
position:relative;
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
}
.copyright {
text-align: center;
}
.creator-container{
position: absolute;
right: 10px;
bottom: 0px;
} <section >
<div >
<p >Copyright © 2022 Jessica Smith</p>
</div>
<div >
<p >Created by Derrick Ogole Web Services</p>
</div>
</section>