Question

我使用 bootstrap 和 img 和 div （用圆圈或div圆圈填充） >查看端口单元（vmax字体），以便在调整浏览器窗口大小的同时适当地更改字体大小和图像大小，同时保持它们对齐并显示为内联。

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

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

问题：我的问题始于我

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

故事：所以我开始调整窗口大小，我意识到了垂直对齐仅在某个时间有效，其余时间则有所改变上下文字和图像。而当我让窗户更狭窄它会导致图像/ div圈将文本推到底部。我没有知道如何解决这个问题。我只想保持图像和文本对齐，无论大小。所以....

当我调整浏览器窗口大小时，如何设置代码格式以使图像/圆圈与文本保持一致？

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将文字与图片并排保存。

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

Answer 2

如果你不能改变标记，位置，填充和边距可以做：

＆＃13;

/* 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;
  }
}

＆＃13;

<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>

＆＃13;

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

2 个答案: