How can I let the a tag vertical center to the footer tag?

Question

How can I let the <a> tag vertical center to the <footer> tag?

This below is my css:

.header-article-list a {

    width:50%;
    color: #000000;
}

.header-article-list .prev-btn {


   float:left;

}
.header-article-list .next-btn {

    float:right;
}

It did not let the <a> tag vertical center to the <footer> tag.

This is the <footer> in browser:

This is the <a> tag in browser:

This is the <span> tag:

EDIT

I set css to below:

.header-article-list a {

    overflow:hidden;
    width:50%;
    color: #000000;
}

.header-article-list .prev-btn {


  /** float:left; **/

}
.header-article-list .next-btn {

  /**  float:right;**/
}

Get the below effect:

EDIT-2

There is text-align:center inherit from header-article-list, I uncheck it in browser:

try `.header-article-list {overflow:hidden}` or use clearfix hacks — Ismail Farooq, Aug 15 '17 at 06:11
Hey what you actually wana do ?? You have just repeated everywhere "tag" — Ashish sah, Aug 15 '17 at 06:12
@IsmailFarooq Oh, it works. But they are next to each other, how to let them separated more? — user7693832, Aug 15 '17 at 06:22
@244boy remove width and check is there any text align property on parent ? — Ismail Farooq, Aug 15 '17 at 06:32
Hello, providing a snippet (HTML+CSS) would have been easier and more effective than screenshots of code and visual ;) . in my humble opinion — G-Cyrillus, Aug 15 '17 at 07:14
oh add overflow hidden on `.header-article-list` not on anchor tag — Ismail Farooq, Aug 15 '17 at 07:18
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — giorgio, Aug 15 '17 at 08:00

score 0 · Answer 1 · answered Aug 15 '17 at 06:22

You can use this code in css:

footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 100%;
text-align: center;
}

HTML:

   <footer align="center">
    <a href="#">March 25, 2</a>
   </footer>

You can show the example here:http://jsfiddle.net/9yNT3/3/

score 0 · Answer 2 · edited Aug 15 '17 at 07:53

0

If it's inline you can just add text-align: center; to the parent <footer>.

If it is display:block, give it a width and add margin:auto; for horizontal centering.

edited Aug 15 '17 at 07:53

Kathara

1,226
1
12
36

answered Aug 15 '17 at 06:52

How can I let the a tag vertical center to the footer tag?

2 Answers2