html - 调整浏览器大小时如何保持图像和文本(vmax 字体)对齐？

Question

我使用 bootstrap 和 在文本旁边添加了一个 img 和 div(像圆圈或 div-圆圈一样填充) >view port units(vmax 字体)以便在调整浏览器窗口大小时适当更改字体大小和图像大小，同时保持它们对齐并显示为内联。

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

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

问题:我的问题开始于我

• 在 h3 标题旁边添加了一张图片
• 在 H1 和 P 标签旁边添加了一个 div-circle(div 形状像圆圈)
• 在 CSS 中我添加了 display:inline-block;
• 我还添加了vertical-align:middle

STORY: So I started resizing the window and I realized that the vertical align only works sometime, and the rest of the time it shifts the text and images up or down. And when I make the window more narrow it causes the image/div circle to push the text to the bottom. I don't know how to solve this problem at this point. I just want to keep the image and text aligned no matter the size. So....

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

Help Fix my Fiddle :(

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>

任何有关如何解决此问题的解决方案或建议将不胜感激。我需要一个更像 css3 专家的人，并且可以指导我解决这个问题。 谢谢!

Answer 1

标记略有变化，添加 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>

和一个新的 CSS 规则，它被添加到 <div class="col-sm-12 flex-it">元素

.flex-it {
  display: flex;
  align-items: center;
}

数字将保留在原位，updated fiddle

这里发生的是 flex-it类使图像和文本包装器 flexbox元素，以及 align-items: center使内容垂直居中。

textwrapper使文本与图像并排。

请注意，您需要修复第四个数字/文本/字段，使其表现得像其余的一样