On my site, http://www.redsquiggli.es under the "Contact Me" section, why are my anchor tags smaller (and underneath) the images that they contain?
Shouldn't the anchor be bigger (with it's specified padding) than it's contents?
Also, I've been trying to get those two icons to be vertically centered in the p tag that the anchor is in... auto margining is not working there either. What's the reason for that?
An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.
Answer: Anchor tag- The HTML code for creating a link to another page or to a particular section within a page. It is also commonly called an "h-ref." For example: -The <a> tag defines a hyperlink, which is used to link from one page to another. Smenevacuundacy and 6 more users found this answer helpful.
The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This hyperlink is used to link the webpage to other web pages or some section of the same web page. It's either used to provide an absolute reference or a relative reference as its “href” value.
The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to destination page or URL.
Make the a tags display:inline-block; and they will surround the images as you expect, and they will be horizontally centered (as they already are) by the text-align: centre; you have set globally.
You can't vertically align an element in css unless you use a table. Although you can make divs behave like tables with some css, but this will not work in IE: link text
Edit 2016:
You can now use flexbox vertically centre an element.
Because the links (a
) are display: inline
by default.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With