Question

我有这个图像和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>

Answer 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

即可

希望这可以解决您的问题。

为什么图像和h3标签在不同尺寸的屏幕上按顺序显示？

1 个答案: