html - 如何在 H1 标签内的堆叠文本旁边显示图像？

Question

我试图让下面的图像显示在文本旁边。有了桌子，这真的很容易。css的正确方法是什么？理想情况下，左边的文本和右边的图像，文本垂直和水平居中在 h1 或 div 的一半。

这是我目前所拥有的JSFiddle ，下面还有 html 和 css。

html:

<h1>
    <div class="title">
        SonoSmile
    </div>
    <div class="subtitle">
        4D Fetal Imaging
    </div>
    <div class="catchline">
        2D, 3D, and 4D Ultrasound
    </div>
        <img class="logo" src="images/james-michael-3d-ultrasound-smiling-at-25-weeks-pregnancy.jpg" width="250" alt="You don't need an excuse to be happy.">
</h1>

CSS：

h1
{
    display:inline-block;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bolder;
    border:thin;
    border-style:solid;
}



.title
{
    font-size:48px;
}

.subtitle
{
    font-size:30px;     
}

.catchline
{
    font-size:22px;
}

Answer 1

JSFIddle 演示

HTML

<div class="wrapper">
    <div class="text">
        <h1 class="title">SonoSmile</h1>
        <h2 class="font-size:30px;  ">4D Fetal Imaging</h2>
        <h3 class="catchline" >2D, 3D, and 4D Ultrasound</h3>

    </div>
    <img class="logo" src="http://sonosmile.com/images/james-michael-3d-ultrasound-smiling-at-25-weeks-pregnancy.jpg" width="250" alt="You don't need an excuse to be happy."/>
</div>

CSS

.wrapper 
{
    display:inline-block;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bolder;
    border:thin;
    border-style:solid;
    overflow:hidden;
} 

.title {
    font-size:48px;
}

.subtitle {
    font-size:30px;     
}

.catchline {
    font-size:22px;
}

.text {
    float:left;
    width:50%;
}

.wrapper img.logo {
    display:block;
    float:right;
    width:50%;
}

Answer 2

将“img”标签移到“h1”块之外。将此添加到CSS：

.logo{float:right; width:250px;}