为什么图像和 h3 标签在不同尺寸的屏幕上没有按顺序出现？答案

【问题标题】：Why don't the image and h3 tag appear in order on different sized screens?为什么图像和 h3 标签在不同尺寸的屏幕上没有按顺序出现？
【发布时间】：2018-11-12 12:12:57
【问题描述】：

我有这个图像和 h3 标签在不同的屏幕上出现乱序，我希望两者都在中心，没有混乱。

我试过了：

<body style="background-color:tomato; color:white; font-family:Consolas; font-weight:600">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="col-md-12 col-sm-4 col-xs-6">
                    <img style="width: 26%; position: absolute; margin-left: 36%; margin-top: -14%;"  class="img-responsive" src="~/Content/images/404.png" />
                    <h3 style="margin-left: 24%; margin-top: 39%;;">Oops, this page does not exists. Go back to @Html.ActionLink("Home", "Index", "Home")</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 "></div>
</body>

【问题讨论】：

目前还不清楚最终结果应该是什么样子。您希望图像在文本旁边还是在文本下方？为什么你需要将许多样式直接应用到元素上，这在使用 bootstrap 时应该不是必需的。

标签： html css twitter-bootstrap dom

【解决方案1】：

我刚刚更改了您的代码，请参阅下面的 HTML

<body style="background-color:tomato; color:white; font-family:Consolas; font-weight:600">
  <div class="container">
      <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="col-md-12 col-sm-4 col-xs-6">
                  <img style="width: 26%; margin: 14% auto 0 auto; display: block;"  class="img-responsive" 
                      src="https://www.seoclerk.com/pics/want54841-1To5V31505980185.png" />
                  <h3 style="text-align: center;">Oops, this page does not exists. Go back to @Html.ActionLink("Home", "Index", "Home")</h3>
              </div>
          </div>
      </div>
  </div>
  <div class="col-sm-12 "></div>

更改了 img 标签样式。将 img 标签置于 div 的中心，将 左右边距设置为自动，并使 img 标签 显示为阻止。同样，当使用左右边距自动使元素居中时，您必须为元素设置宽度。

在h3标签中你只需要添加text-align: center

希望这能解决您的问题。

【讨论】：