我正在尝试让下面的图片显示在文本旁边。有了表格,这真的很容易。 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;
}
最佳答案
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%;
}
关于html - 如何在 H1 标签内的堆叠文本旁边显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19609051/