How do I center an anchor element in CSS

Question

I just want to have my anchor in the middle of the screen horizontally  how might I do this    lt a href  http   www example com  gt example lt  a gt

User · Accepted Answer

Add the text-align css property to its parent style attribute  Eg    lt div style  text-align center  gt     lt a href  http   www example com  gt example lt  a gt                                       lt  div gt     Or using a class  recommended    lt div class  my-class  gt     lt a href  http   www example com  gt example lt  a gt                                       lt  div gt        my-class     text-align  center        See below working example    x000D   x000D   my-class   x000D    text-align  center  x000D    background green  x000D    width 400px  x000D    padding 15px   x000D    x000D   my-class a text-decoration none  color  fff   x000D   lt  --EXAMPLE-ONE-- gt  x000D   lt div style  text-align center  border solid 1px  000  padding 15px   gt  x000D     lt a href  http   www example com  gt example lt  a gt                                      x000D   lt  div gt   x000D   x000D   lt  --EXAMPLE-TWO-- gt  x000D   lt div class  my-class  gt  x000D     lt a href  http   www example com  gt example lt  a gt                                      x000D   lt  div gt   x000D   x000D   x000D      Q  Why doesn t the text-align style get applied to the a element instead of the div   A  The text-align style describes how inline content is aligned within a block element  In this case the div is an block element and it s inline content is the a  To further explore this consider how little sense it would make to apply the text-align style to the a element when it is accompanied by more text   lt div gt    Plain text is inline content      lt a href  http   www example com  style  text-align  center  gt example lt  a gt      lt span gt Spans are also inline content lt  span gt   lt  div gt    Even though threre are line breaks here all the contents of div are inline content and therefore will produce something like      Plain text is inline content  example Spans are also inline content   It doesnt  make much sense as to how  example  in this case would be displayed if the text-align property were to be applied it it

User · Answer

try to wrap a div around and add these styles to the div    width  100     text-align center

User · Answer

css cannot be directly applied for the alignment of the anchor tag  The css  text-align center   should be applied to the parent div element for the alignment effect to take place on the anchor tag

User · Answer

You can try this code      code starts here     a class name   display   block text-align   center

User · Answer

By default an anchor is rendered inline  so set text-align  center  on its nearest ancestor that renders as a block

User · Answer

Two options  that have different uses   HTML    lt a class  example  href  http   www example com  gt example lt  a gt    CSS    example   text-align  center      Or    example   display block  width 100px  margin 0 auto

User · Answer

There are many ways    lt  -- Probably the most common  -- gt   lt div style  text-align  center   gt  lt a href       gt Link lt  a gt  lt  div gt    lt  -- Getting crafty    -- gt   lt a href       style  display  block  text-align  center   gt Link lt  a gt  lt  div gt    There are probably other ways too  but these three are probably the most common

User · Answer

I think you can t do that with inline elements like anchor  span  But to make it work you have to set the display to block     lt a href  http   www example com  style  text-align center display block   gt example lt  a gt

User · Answer

Just put it between center tags    lt center gt  gt  lt Your text here gt  gt  lt  center gt

User · Answer

style  margin 0 auto  width auto   Try that

User · Answer

lt span style  text-align center  display block   gt   lt a href  http   news awaissoft com  gt Awaissoft lt  a gt   lt  span gt

User · Answer

Try  margin  0 auto  display table   Hope that helps somebody out

User · Answer

write like this    lt div class  parent  gt    lt a href  http   www example com  gt example lt  a gt   lt  div gt    CSS   parent    text-align center

[html] How do I center an anchor element in CSS?

Examples related to html

Examples related to css