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

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

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

Answer 2

JSFIddle Demo

<强> 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%;
}

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

2 个答案: