0

下の画像をテキストの横に表示しようとしています。テーブルを使用すると、これは非常に簡単になります。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;
}
4

2 に答える 2

1

「img」タグを「h1」ブロックの外に移動します。これを css に追加します。

.logo{float:right; width:250px;}
于 2013-10-26T16:33:10.943 に答える