position elements in a horizontal line while one of them is placed at the center

Question

I want to create a simple footer. I need the copyright text at the center and two links at the right side (all three elements should be horizontally positioned)

So far they position above each other.

How can I fix this?

#myFooter .footer-copyright {
    background-color: #333333;
    padding-top: 3px;
    padding-bottom: 3px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#myFooter .row {
    margin-bottom: 60px;
}

#myFooter .navbar-brand {
    margin-top: 45px;
    height: 65px;
}

#myFooter .footer-copyright p {
    margin: 10px;
    color: #ccc;
}

#myFooter ul {
    list-style-type: none;
}

<footer id="myFooter">
<div class="footer-copyright">

<ul>
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
</ul>
                    
                    
    <p>copyright goes here...</p>
</div>
 </footer>

Refer to https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements for various methods to achieve what you are looking for — Xenvi, Jun 07 '20 at 22:01

Filip Račić · Accepted Answer · 2020-06-07T22:08:20.557

1

Just add to all elements

display: inline-block;

To elements you want to position left and right give them :

position: absolute;

left: 0; // or if you want right use right: 0;

edited Jun 07 '20 at 22:08

answered Jun 07 '20 at 22:04

Filip Račić

90
1
7

@foxer you need to separate li elements, give them id's and in css access both of them separately and give them left: 0; and right: 0; – Filip Račić Jun 07 '20 at 22:19

Rounin · Answer 2 · 2020-06-07T22:30:45.680

I want to create a simple footer [...] copyright text at the center and two links at the right side

One approach to achieving this is to use CSS Grid.

In the CSS Grid below, I have:

Created a grid with a single row and three columns
placed the .copyright in the center cell
placed the .links in the right-hand cell
horizontally centered the contents of each grid cell, using justify-items: center;
vertically centered the contents of each grid cell, using align-items: center;

Working Example:

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 100%;
  justify-items: center;
  align-items: center;
  width: 100vw;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 191, 0);
}

.copyright {
  grid-area: 1 / 2 / 2 / 3;
}

.links {
  grid-area: 1 / 3 / 2 / 4;
}

.links a {
  color: rgb(255, 255, 255);
}

<footer>

<p class="copyright">&copy; Copyright Goes Here</p>

<ul class="links">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
</ul>

</footer>

score 1 · Answer 3 · answered Jun 07 '20 at 22:37

on their parent element give the style display: flex;
this will arrange the elements in a row, use justify-content: center and align-items: center to align the items at the center of the parent both horizontally and vertically, but the links will still be vertically aligned, give the parent element of the links, ie the <ul></ul> the style display: flex; too. Hope this helps.

position elements in a horizontal line while one of them is placed at the center

3 Answers3