css - 图像旁边文本的垂直对齐方式

Question

在我的网站http://goo.gl/16XdA（“关于我们”部分）上，我希望蓝色标题与其左侧的挪威国旗垂直对齐。我尝试使用 padding-bottom 和 margin-bottom （将蓝色标题向上移动几个 px），但这根本不起作用。任何想法？Tks

CSS

#activity-container {
    width: 600px;
    background-color: #FFFFFF;
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color:#000;
    font-weight: 400;
    padding:25px;
    margin-left: auto;
    margin-right: auto;
    border: 1px dotted #666;
    background: #fff url(../images/norway-map.png) no-repeat right top;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
    filter: alpha(opacity=93);
    opacity: 0.93; /* For IE8 and earlier */
}

HTML

<div id="activity-container">
    <p><img src="images/norway-flag-small.jpg" alt="Picture" /><span class="activity-title">Swoåsa , naturlig mineralvann, ren natur</span></p>
    <br />
    <p>XXZ AS was founded</p>
  </div>

Answer 1

在标志图像上使用vertical-align: middle，这会将文本垂直放置在图像的中心。目前，该属性被设置为vertical-align: baseline来自您的reset.css文件。