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="" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0px; display: block; ">Loading...</a>
(the blue song info in the frame below the menu)
Any thoughts?
6 Answers
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=""
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=""
id="cc_strinfo_song_tranceilfm" class="cc_streaminfo"
style="margin: 0 auto; display:block; text-align: center">Loading...</a>
<!-- text-align: center directly on element -->
<a href="" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0 auto; display:block; text-align: center">Loading...</a>
<!-- text-align: center on parent container -->
<div style="margin: 0 auto; text-align: center">
<a href="" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0px; display:block;">Loading...</a>
</div>Try encapsulating your A element in a div and adding the CSS text-align property:
<div style="text-align: center;">
<a href="" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo">Loading...</a>
</div>
Use margin left and right with percentage. for more details look at the following tutorial:
To center something in CSS, make sure the parent element has position: relative, and the element you want to center position: absolute and left: 50% and margin-left: -width/2. That's the basic idea to center elements horizontally. To center vertically you can use the same technique but with top: 50% and margin-top: -height/2, or if it's just text then set the line-height equal to the height of the container element.
display: inline-block;
text-align: center;
margin-left: 50%;
margin-right: 50%;
overflow: visible;
Try adding a width to your element like this:
#cc_strinfo_song_tranceilfm {
width: 90%;
clear: both;
margin: auto;
}
