positioning text of anchor within a div

问题

Given the markup

<div id="header">
<a href="cattle.html" class="current">Cattle Farms</a>
</div>

And style

#header
{
width: 960px;
height: 200px;
margin-bottom: 20px;
}

#header a
{
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}

How whould I go about placing/positioning/aligning the text "cattle farms" so that it sits 20px from the left and 20px from the bottom in such a manner that it does not break the a out of the div visually even when looking it with Firebug.

回答1:

You could simply add a <span> to the anchor and add some padding to that. Like this:

<div id="header">
  <a href="cattle.html" class="current"><span>Cattle Farms</span></a>
</div>

And add these additional styles:

#header a span {
padding-left: 20px;
padding-bottom: 20px;
}

EDIT:

Also, add overflow: hidden to the header.

#header {
overflow: hidden;
}

回答2:

You need to specify position: relative on the parent container:

CSS:

#header {
  position: relative;

  width: 960px;
  height: 200px;
}

#header a {
  position: absolute;

  bottom: 20px;
  left: 20px;
}

回答3:

I would recommend taking away the 100% width and height. By doing this, you'll be able to place it within the header. If you don't, you're expanded to the size of the header, so there's no room to change your placement.

Since it's a block element, you can do this a few ways. You can either use margin to "push" it away from other elements (if you decide to add more on top of it). Or you can you use "position: relative" and "top" or "left". I would recommend using this with a %. I tried this code and it achieved the effect you were looking for I think:

#header{
width: 960px;
height: 200px;
}

#header a {
display: block;
position: relative;
top: 95%;
}

回答4:

Well. I have no idea why this works. But it does

div#header a
{
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}

来源：https://stackoverflow.com/questions/11997161/positioning-text-of-anchor-within-a-div

标签

html

css

text

anchor