为什么图像和h3标签在不同尺寸的屏幕上按顺序显示？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么图像和h3标签在不同尺寸的屏幕上按顺序显示？相关的知识，希望对你有一定的参考价值。
我有这个图像和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
<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
希望这能解决你的问题。
以上是关于为什么图像和h3标签在不同尺寸的屏幕上按顺序显示？的主要内容，如果未能解决你的问题，请参考以下文章