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

问题描述 投票:0回答:1

我有这个图像和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>
html css twitter-bootstrap dom
1个回答
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的中心,将左右边距设置为auto并使img标签显示为阻止。当使用左边距和右边自动对中心元素时,你必须设置元素的宽度。

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

希望这能解决你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.