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="">Loading...</a>(the blue song info in the frame below the menu)
Any thoughts?
16 Answers
This should do it (center the link using text-align: center in the parent container):
<div> <a href="">Loading...</a>
</div>Or simply add text-align: center to the element itself:
<a href="">Loading...</a><!-- text-align: center directly on element -->
<a href="">Loading...</a>
<!-- text-align: center on parent container -->
<div> <a href="">Loading...</a>
</div>Try encapsulating your A element in a div and adding the CSS text-align property:
<div> <a href="">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;
}
