如何将页面顶部的‘Brainy Quote’链接居中？解决整行变蓝问题

Got it, let's fix this! The issue you're seeing is because your #link element is a <p> tag—by default, that's a block-level element that takes up the full width of its parent. When you add text-align:center to it, the link centers correctly, but the blue background covers the entire line because the <p> spans the whole width.

Here are two simple solutions to get the centered link with only the link's area having the blue background:

Solution 1: Move background styles to the anchor tag #

This is probably the cleanest approach. We'll center the link using text-align:center on the parent <p>, but apply the blue background directly to the <a> tag instead of the <p>.

Updated CSS:

#link {
  text-align: center; /* Centers the inline link inside the block */
}

#link a {
  background-color: blue;
  color: white;
  display: inline-block;
  text-decoration: none;
}

#link a:visited {
  color: white;
}

Your HTML stays exactly the same—no changes needed here.

Solution 2: Make the parent <p> inline-block and center it #

If you prefer keeping the background on the <p>, we can change the <p> to an inline-block element so it only wraps the link, then center it with margin: 0 auto.

Updated CSS:

#link {
  background-color: blue;
  display: inline-block; /* Now the p only takes up the space of its content */
  margin: 0 auto; /* Centers the inline-block element horizontally */
  text-align: center; /* Ensures the link is centered inside the p (redundant here but safe) */
}

#link a {
  color: white;
  text-decoration: none;
}

#link a:visited {
  color: white;
}

Again, your HTML doesn't require any modifications.

Either of these will give you the centered "Brainy Quote" link with the blue background only around the text, not the entire line.

内容的提问来源于stack exchange，提问作者charlie