Center a image in footer with text on the left-CodePudding

I'm trying to make a footer with an image in the centre and a paragraph on the left side of the footer. This is what I have:

As you can see while the text is on the left, the image is not centred.

This is my code:

.copyright {
  color: #b4b4b4;
  float: left;
  font-size: 15px;
  margin-left: 10px;
}

footer {
  background: #303030;
  padding: 35px 0;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: auto;
  display: inline-block;
}

<footer>
  <p >Aeron © 2022</p>
  <a href="index.html"><img src="./images/logo.png" width="125px" title="Aeron Corporation" alt="logo" ></a>
</footer>

How can I fix this? Thanks

CodePudding user response：

Try absolute positioning

.copyright {
  color: #b4b4b4;
  float: left;
  font-size: 15px;
  margin-left: 10px;
}

footer {
  position: relative;
  background: #303030;
  padding: 35px 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: inline-block;
}

footer a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<footer>
  <p >Aeron © 2022</p>
  <a href="index.html">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Android_O_Preview_Logo.png/1024px-Android_O_Preview_Logo.png" width="125px" title="Aeron Corporation" alt="logo" >
  </a>
</footer>

CodePudding user response：

you can use display flex!

.copyright {
  color: #b4b4b4;
  float: left;
  font-size: 15px;
  margin-left: 10px;
}

footer {
  background: #303030;
  padding: 35px 0;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
 position: absolute;
 left: 0;
}

<footer>
  <p >Aeron © 2022</p>
  <a href="index.html"><img src="./images/logo.png" width="125px" title="Aeron Corporation" alt="logo" ></a>
</footer>

CodePudding user response：

I added some borders to show what was where. Using this I think you will find that no matter what the size of the text left is or the page size it will center the image and keep the copyright on the left;

I added the verbose grid version in comments for clarity.

footer {
  font-size: 16px;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3 1fr);
  align-items: center;
  text-align: center;
  height: 4rem;
  border-color: pink;
  background: #303030;
}

footer,
footer>* {
  border: 2px solid;
}

.copyright {
  text-align: left;
  grid-area: 1 / 1 / 1 / 1;
  border-color: lime;
  color: #b4b4b4;
  font-size: 2rem;
  /* same as
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;*/
}

.pretty-image {
  grid-area: 1 / 1 / 1 / 3;
  border-color: orange;
  /* same as
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 3;*/
}

.pretty-image>a>img {
  height: 50px;
  width: 50px;
}

<footer>
  <div >Aeron &copy; 2022</div>
  <div >
    <a href="index.html"><img src="./images/logo.png" width="125px" title="Aeron Corporation" alt="logo" ></a>
  </div>

</footer>