内联样式部分元素的部分？

Question

我正在尝试将section元素与样式化的aside元素对齐。 我已经尝试了inline ， block和inline-block所有组合，但是似乎什么也没发生。 我不明白为什么它不符合要求。 小提琴： http ： //jsfiddle.net/bmgkB/

从视觉上看，这是结果：

...我想（大约）在这里得到：

HTML摘录：

<aside class="icon"><p>§</p></aside> 
    <section role="region" class="aside">
        Welcome to the Pyroneous Lair. There is a variety of features here. 
    </section>

CSS摘录：

@charset UTF-8;

body
{
  background:#000;
  color:#FFF;
  width:90%;
  font:11px tahoma, sans-serif, serif;
  margin:auto
}

article,aside,figure,footer,header,hgroup,menu,nav,section
{
  display:block
}

header
{
  text-align:center
}

hr
{
  border:none;
  border-top:medium double #333;
  color:#FFF;
  text-align:center;
  padding:0
}

hr:after
{
  content:"§";
  display:inline-block;
  position:relative;
  top:-.85em;
  font-size:1.5em;
  background:#000;
  z-index:2;
  padding:0 .25em
}

.icon
{
  font:45px serif, "Times New Roman", sans-serif;
  color:#000;
  border-radius:100px;
  text-align:center;
  width:70px;
  height:70px;
  background:#A60000
}

.aside
{
  margin-left:5%;
  display:inline
}

Answer 1

使.aside和.icon都display:inline-block （ 并从icon内部删除p ，因为它什么也没有提供。 ）

演示位于http://jsfiddle.net/gaby/bmgkB/2/