askvity

How Do I Move a Link to the Center in CSS?

Published in CSS Centering Link 6 mins read

To move a link to the center using CSS, you typically need to control how the browser displays and spaces the link element. A common and effective method involves changing the link's display type and using auto margins.

Centering a link can mean two things: centering the link element itself horizontally within its container, or centering the text inside the link. The method you use depends on which type of centering you need. Often, when people ask this question, they want to center the link element horizontally, especially if it's styled to look like a button.

Centering the Link Element Horizontally

Links (<a> tags) are naturally inline elements. By default, inline elements only take up as much width as their content and cannot have their horizontal margins (margin-left or margin-right) automatically center them using margin: 0 auto.

To center a link element horizontally within its containing block, you need to change its display property.

  1. Set display: block;: Changing the link's display to block makes it behave like a paragraph or a division (<div>). Block-level elements start on a new line and take up the full available width by default.
  2. Set a width: Once the element is display: block, you need to give it a specific width. If you don't set a width, it will take 100% of the container's width, and there will be nothing to center. Set a width smaller than its container.
  3. Apply margin: 0 auto;: With display: block and a defined width, setting the left and right margins to auto will automatically calculate equal space on both sides, effectively centering the block element within its parent container. The 0 in 0 auto sets the top and bottom margins to zero (you can adjust this value).

This method, particularly using display: block, setting a width, and applying margin: 0 auto, is mentioned in the provided reference as a way to center an element horizontally.

Here's a CSS example:

.center-link-element {
    display: block; /* Make it a block element */
    width: 200px; /* Give it a specific width */
    margin: 20px auto; /* Center it horizontally (20px top/bottom margin) */
    text-align: center; /* Center the text inside (see below) */
    padding: 10px; /* Optional: add some padding */
    border: 1px solid blue; /* Optional: visualize the block */
}

And the corresponding HTML:

<div style="border: 1px dashed grey; padding: 10px;">
    <a href="#" class="center-link-element">This link is centered</a>
</div>

Centering Text Within the Link

If your link is not display: block and you only want to center the text inside it (which is less common for horizontal centering, but relevant if the link element itself has width), or if you are using display: block and want the text within that block to be centered, you use the text-align property.

The text-align property centers inline content (like text) within its containing block element.

  1. Apply text-align: center;: Set this property on the link itself or on its parent container. If you set it on the link (and the link is display: block), it centers the text within the link's defined width. If you set it on the link's parent container, it centers any inline or inline-block children within that container (including inline links).

As noted in the reference, text-align: center can be used to center text within the element, for instance, to center the label of a link styled as a button.

Here's a CSS example focusing on text alignment:

.center-link-text {
    /* If link is display: inline or display: inline-block */
    /* text-align: center; won't center the element itself */
    /* but will center text if the element has intrinsic width */
    /* or padding/borders creating width. */

    /* More commonly, apply text-align: center to the parent: */
    padding: 10px;
    border: 1px solid green;
}

/* Applied to the parent container */
.parent-of-centered-text-link {
    text-align: center; /* Centers inline children like <a> */
    border: 1px dashed grey;
    padding: 10px;
}

And the corresponding HTML:

<div class="parent-of-centered-text-link">
    <a href="#" class="center-link-text">This link's text is centered (by parent)</a>
</div>

Combining Techniques for a Centered Button-Like Link

As highlighted by the reference, combining these techniques allows you to create a link that behaves like a block-level button and is centered within its container, with its internal text also centered.

  • Use display: block, width, and margin: 0 auto on the <a> tag to center the link block itself.
  • Use text-align: center on the <a> tag to center the text label within the link's block.

This combination provides a powerful way to control the layout and appearance of important links.

Summary Table of CSS Properties for Centering

Property Value Applied to Link (<a>) Applied to Parent Container Effect Used For Requires Other Properties?
display block Yes No Makes link behave like a block element Centering the link element itself Yes, width and margin: 0 auto
width (e.g., 200px, 50%) Yes No Gives block element a specific size Centering the link element itself Yes, display: block and margin: 0 auto
margin 0 auto Yes No Centers a block element with a defined width Centering the link element itself Yes, display: block and width
text-align center Yes Yes Centers inline content within a block element Centering text inside the link
or
Centering an inline link by its parent		 If applied to link: link must be block/inline-block or have width

By understanding these properties and how they interact, you can effectively center links in various layouts. Using display: block and margin: 0 auto is the standard approach for centering the link element horizontally, while text-align: center handles the text within.

Related Articles