How can I put a break between two elements contained by a span using css?

I have the following HTML:

<form action="http://localhost:2689/" method="post">
    <span>
        <label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
        <input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />             
        <button id="powerSearchSubmitButton"  class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
        <a href="Search.mvc/EmptyAdvancedSearch" id="advancedSearchLinkButton"  class="fancyLinkButton"><span><em>Advanced</em></span></a>
    </span>        
</form>

The form's content needs to be centered over it's width (100% in this case).
The anchor needs to be directly under the button.

Because a picture can say a thousand words, here's the result of my awesome paint art skills:

And this whole block should be centered on the webpage.

--EDIT--
Because the content of all the controlls can varry greatly in length, I cannot give any element any width specifications (not even in %). Also, over estimating the width would leave confusing white spaces between elements. This too is not a desired effect.

From stackoverflow

• I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.

  borisCallens : But if I want to center my form elements float f***s it up

  Greco : Try to put then your form between center tags....

  Erik : Put a div around things you want to center and use margin:0 auto; on it and specify a width. You could also do this on the form itself if you want to center the whole form. The floats are relative to its container being the div or form. So floating form elements doesn't 'f*** up' anything...

  borisCallens : centering floats always means fixed size. Because off translation I can never know how long elements will be.

  tehborkentooth : @boris callens: you don't have to used fixed size to center floats. You can use %

  borisCallens : Yes, but that's still a width. I don't know how much I'm going to need. And putting too much width gives confusing whitespaces.

• Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.

  borisCallens : Can't use element widths because almost everything will get translated and can have all kinds of widths

• Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.

  You also have a lot of extraneous tags in there. Instead of this:

  <button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
      <span><em>Search</em></span>
  </button>
  

  why not just do this:

  <button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
      Search
  </button>
  

  The span does nothing, and the em can be emulated through CSS:

  .fancySubmitButton { font-style: italic }`
  

  Here's what I'd do:

  <form>
      <label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
      <input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />             
      <button id="powerSearchSubmitButton"  class="fancySubmitButton" type="submit">Search</button>
      <a href="Search.mvc/EmptyAdvancedSearch" id="advancedSearchLinkButton"  class="fancyLinkButton">Advanced</a>
  </form>
  

  with the CSS:

  form {
      text-align: center;
  }
  .fancySubmitButton, .fancyLinkButton {
      font-style: italic;
  }
  .fancyLinkButton {
      display: block;  /* this will put it on its own line */
  }
  

  Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.

  porneL : HTML's rules for block/inline/flow content have *nothing* to do with CSS concept of block and inline. It's perfectly valid to put display:block on span.

  borisCallens : The extra tags is (as the class hints) for making rounded buttons.

  borisCallens : Also, I don't want to put each on its own line because that wouldn't make sence in the rest of the lay-out. I need them to be as described in OP

  tehborkentooth : @boris callens: what do you mean with not wanting to put each on it's own line?

  borisCallens : I need the first three elements to be on a line and the last element to be on a line, right under the button. I'll update the OP to clear things up.

  nickf : edited the code and responded to the above comments.

  nickf : @porneL, I didn't say that you *can't* put display: block on a span, I just said you *shouldn't*. It's like redefining the basic building blocks of a language. It can still work, but it makes your readability and maintainability suffer.

  borisCallens : @nickf: don't take this offensive, I was (and am) merely trying to justify why those elements are there. As I don't like to rely on JS, I made an HTML helper method in my personal asp.net-mvc helper lib. If ever all browsers support rounded css, I will change the code there.

• I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of

  fieldset {
      text-align: center;
      width: 100%;
      position: relative;
  }
  

  I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.

  borisCallens : What would be the advantage of the fieldset over the span except for needing another css rule to disable the border?

• Why not just put a break in before the tag (
  ) then align the to the right?

  borisCallens : a br tag puts it on another line, but I can't align it under the button then..

  ck : you should be able to right align it in your span if the other elements take the full width of the span.

  borisCallens : There is no parent tag with fitting width. It has the full width of the screen and text-align: center;

  ck : Your span should have a width, and should have its left/right margins set as auto to center it. This will solve your problem.