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

Question

我使用引导程序和查看端口单位 （vmax字体）在文本旁边添加了img和div （以圆圈或div-圆填充），以在更改浏览器窗口大小的同时适当地更改字体大小和图像大小，同时保持它们对齐并显示为嵌入式。

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

但是，您不一定总能得到想要的...

问题：我的问题始于我

• 在h3标题旁边添加了图片
• 在H1和P标签旁边添加了一个div-circle（类似圆形的div）
• 在CSS中，我添加了display:inline-block;
• 我还添加了vertical-align:middle

故事：因此，我开始调整窗口大小，并意识到垂直对齐仅在某个时间有效，其余时间则将文本和图像上移或下移。 当我将窗口缩小时，会导致图像/ 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>

任何解决方案或建议如何解决此问题将不胜感激。 我需要一个更像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;
}

该号码将保留在原位， 更新小提琴

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

textwrapper使文本与图像并排。

请注意，您需要修正第四个数字/文本/字段，使其行为与其余部分相同

Answer 2

如果您不能更改标记，则位置，填充和边距可以：

 /* BODY DEFAULTS */ body { height: 100vh; width: 100vw; } @media (max-width: 210px) { body { overflow-x: auto; } } @media (min-width: 211px) { body { overflow-x: hidden; } } /* CUSTOM FONT */ 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; } img { height: 2.5vmax !important; width: 14.5vmax !important; } .col-sm-12 { position: relative; padding-left: 10vmax; background:gray; margin:0.25em; } .numberCircle { position: absolute; left: 0; top: 50%; margin-top: -3vmax; border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ background: #333; border: 2px solid #333; color: #fff; text-align: center; display: inline-block; } @media (min-width: 818px) { .numberCircle { font: 86px Arial, sans-serif; width: 96px; height: 96px; } } @media (max-width: 817px) { .numberCircle { font: 46px Arial, sans-serif; width: 56px; height: 56px; } } @media (max-width: 417px) { .numberCircle { font: 26px Arial, sans-serif; width: 36px; height: 36px; } } 

 <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> <p style="display: inline-block;" class="text-muted">The content here is far longer but smaller and remains muted.</p> <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 id="error-message"> </div> </div> </div> </row> </div>