HTML - How to add a box within a box with some text centered in HTML?

I want it to look something like the image below

开发者_JS百科

---

Something like this?:

http://jsfiddle.net/JA7vh/

---

JSFiddle: http://jsfiddle.net/Tq8Ff/4/

Code:

<div class="wrapper">
    <span class="inner">new message form heaquarter</div>
</div>

.inner {
    text-align:center;
    background-color: white;
}

.wrapper {
 text-align:center;
 background-color: purple;
  padding: 10px;  
}

---

Here you go: http://jsfiddle.net/a3U5a/