Cant align footer icons centrally

HTML & CSS
1

Hi from Sunny 9 degrees C York UK :smile:

On this page www.davidclick.com I wanted to centrally align the 3 social media icons, below illustrates my pain:

815×796 561 KB

I battled trying to get the result i wanted. Principally i thouth if i float the Terms and conditions hyperlink I’d be able to centrally align the icons within the div but I just cant do it.

If anyone has the patience to offer a fix and a reason why my css doesnt do what I’d like it to do I’d be v gratefull :smile:

Line 1124 of the css shows my workings :smile:

Thanks in advance,
David

2

They are centred, but in the space left over after floating the Ts&Cs on the right.
Taking out that float will let them centre properly.
If you still need the Ts&Cs on the right, in line with them, you may have to give them an absolute position with top and right. That would also require the parent container #social to have relative positioning.

#social { position: relative; }

.tandc {
   position: absolute;
   top: 0;
   right: 5px;
}
2 Likes
3

Yes that worked thank you :smile:

One last question on this… OPn a quest to understand more about CSS I just wanted to understand why in terms of getting the 3 icons in the footer to center worked with:

#social { position: relative; text-align: center; }

but NOT {

#social { position: relative; margin: auto; }

Just wonder why margin:auto diddnt centre the three icons in the div but text-align centre worked?

Thanks,
David

4

The <a> and <img> elements are inline elements, think of inline elements as being like characters or words of text on a line, they align and wrap in the same way. That’s why text-align works on them.
'margin: auto` should only be used on block elements.
You may of course change the default display type to block, but that would not work in this case, because they are 3 separate elements in a row, though it could be done with flex box instead.

2 Likes
5

#social is a block container, as @SamA74 described. By default, block containers extend to the full width of the available space. You can temporarily assign a border to #social and see that it fills the full width of its parent, so there is nothing for the margin to do (the margin is not assigned to the inline objects where it would have no affect, anyway). In short, the margin would act on the current container, #social. {text-align:center} would act on the contents of #social, its inline children.

2 Likes
6

Thank you @ronpat @SamA74 really appreciate the CSS theory, it really helps my CSS education :slight_smile:

3 Likes
7

html code.txt (421 Bytes)

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.