Trance84 Trance84 - 1 month ago 9
CSS Question

Center an <a href element

I have an element in my header that is getting data from a js file.

I'm trying to center that element in my page but all i do dosent seem to work.

I tried margin-left: auto and margin-right: auto but still is not centering.

The element code is:

<a href="http://[ip]/tunein/tranceilfm.pls" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0px; display: block; ">Loading...</a>



http://tranceil.fm


(the blue song info in the frame below the menu)

Any thoughts?

Answer

This should do it (center the link using text-align: center in the parent container):

<div style="margin: 0 auto; text-align: center">
    <a href="http://94.23.250.14:2199/tunein/tranceilfm.pls" 
    id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" 
    style="margin: 0px; display:block;">Loading...</a>
</div>

Or simply add text-align: center to the element itself:

    <a href="http://94.23.250.14:2199/tunein/tranceilfm.pls" 
    id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" 
    style="margin: 0 auto; display:block; text-align: center">Loading...</a>

Fiddle: http://jsfiddle.net/a9pyj/1/