Html 调整浏览器大小时，如何保持图像和文本（vmax字体）对齐？

我在文本旁边添加了一个img和div（像一个圆圈或div圆圈一样填充），使用bootstrap和查看端口单元（vmax font>），以便在调整浏览器窗口大小时适当更改字体大小和图像大小，同时保持它们对齐并以内联方式显示

基本上，这就是我在调整窗口大小时要维护的内容：

然而，你并不总是能得到你想要的

问题：我的问题始于

• 在h3标题旁边添加了一个图像
• 在H1和P标记旁边添加了一个div圆（类似圆的div形状）
• 在CSS中，我添加了

  display:inline块

• 我还添加了

  verticalign:middle

故事：所以我开始调整窗口的大小，我意识到 垂直对齐只在某些时候起作用，其余时间会移动 文本和图像向上或向下移动。当我把窗户弄得更窄的时候 它会使image/div圆圈将文本推到底部。我不 现在知道如何解决这个问题。我只想保持图像和文本对齐，无论大小。所以

在调整浏览器窗口大小时，如何格式化代码以使图像/圆圈与文本对齐？

CSS:

    h1 {
  font-size: 3.3vmax !important;display:inline-block;
}
h2 {
  font-size: 3.0vmax !important;display:inline-block;
}

h3 {
  font-size: 2.5vmax !important;  display:inline-block; 
}

p {
  font-size: 2.0vmax !important;  display:inline-block; 
}

img {height: 2.5vmax !important; width:14.5vmax !important; }

HTML

<div class="container">
    <row>
        <div class="col-sm-12">
            <h3>Welcome to the main title of this page</h3>
            <img   src="http://www.useragentman.com/tests/pointerEvents/images/disney-tv.png" />
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">1</div>
            <h2 style="display: inline-block;">This is a main subtitle section of the page</h2>
            <p style="display: inline-block;" class="text-muted">The content here is far longer but smaller and remains muted.</p>
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">2</div>
            <h2>This is a main subtitle section of the page</h2>
            <p class="text-muted">The content here is far longer but smaller and remains muted.</p>
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">3</div>
            <h2>This is a main subtitle section of the page</h2>
            <p class="text-muted">The content here is far longer but smaller and remains muted.</p>
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">4</div>
            <h2>This is a main subtitle section of the page</h2>
            <div class="guestlist">
                <form class="guestlist-form" action="email.php#updates" method="post">
                    <input name="emailaddress" id="emailaddress" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
                    <input class="button" title="Enter Email" name="submit" type="submit" value="Add Email">
                </form>
            </div>
        </div>
    </row>
</div>

欢迎来到本页的主标题
1.
这是本页的主副标题部分
此处的内容更长，但更小，并保持静音
2.
这是本页的主副标题部分
此处的内容较长，但较小，并保持静音
3.
这是本页的主副标题部分
此处的内容较长，但较小，并保持静音
4.
这是本页的主副标题部分

---

对于如何解决此问题的任何解决方案或建议，我们将不胜感激。我需要有人谁是一个css3的专家更多，可以指导我解决这个问题谢谢

标记稍有更改，添加一个

textwrapper

<div class="numberCircle">1</div>
<div class="textwrapper">
    <h2>This is a main subtitle section of the page</h2>
    <p class="text-muted">The content here is far longer but 
</div>

号码将保持不变

这里发生的是

flex-it

类使图像和文本包装器

flexbox

项，而

align-items:center

使其内容垂直居中

textwrapper

将文本与图像并排保存

---

注意，您需要修复第四个数字/文本/字段，使其与其他数字/文本/字段一样，只需稍作标记更改，即可添加一个

textwrapper

<div class="numberCircle">1</div>
<div class="textwrapper">
    <h2>This is a main subtitle section of the page</h2>
    <p class="text-muted">The content here is far longer but 
</div>

号码将保持不变

这里发生的是

flex-it

类使图像和文本包装器

flexbox

项，而

align-items:center

使其内容垂直居中

textwrapper

将文本与图像并排保存

---

请注意，如果无法更改标记、位置、填充和边距，则需要修复第四个数字/文本/字段，使其与其他数字/文本/字段类似：

/*正文默认值*/
身体{
高度：100vh；
宽度：100vw；
}
@介质（最大宽度：210px）{
身体{
溢出-x：自动；
}
}
@介质（最小宽度：211px）{
身体{
溢出x：隐藏；
}
}
/*自定义字体*/
h1{
字体大小：3.3vmax！重要；
显示：内联块；
}
氢{
字体大小：3.0vmax！重要；
显示：内联块；
}
h3{
字体大小：2.5vmax！重要；
显示：内联块；
}
p{
字体大小：2.0vmax！重要；
}
img{
高度：2.5V最大！重要；
宽度：14.5vmax！重要；
}
col-sm-12{
位置：相对位置；
左侧填充：10V最大值；
背景：灰色；
边缘：0.25em；
}
.数字圆圈{
位置：绝对位置；
左：0；
最高：50%；
利润上限：-3V最大；
边界半径：50%；
行为：url（PIE.htc）；
/*如果不关心IE8，请删除*/
背景：#333；
边框：2倍实心#333；
颜色：#fff；
文本对齐：居中；
显示：内联块；
}
@介质（最小宽度：818px）{
.数字圆圈{
字体：86px Arial，无衬线；
宽度：96px；
高度：96px；
}
}
@介质（最大宽度：817px）{
.数字圆圈{
字体：46px Arial，无衬线；
宽度：56px；
高度：56px；
}
}
@介质（最大宽度：417px）{
.数字圆圈{
字体：26px Arial，无衬线；
宽度：36px；
高度：36px；
}
}

欢迎来到本页的主标题
1.
这是本页的主副标题部分
此处的内容更长，但更小，并保持静音
此处的内容更长，但更小，并保持静音
此处的内容更长，但更小，并保持静音
2.
这是本页的主副标题部分
此处的内容较长，但较小，并保持静音
3.
这是本页的主副标题部分
此处的内容较长，但较小，并保持静音
4.
这是本页的主副标题部分

如果无法更改标记、位置、填充和边距，可以执行以下操作：

/*正文默认值*