gpt4 book ai didi

html - 为什么图片和 h3 标签在不同尺寸的屏幕上不按顺序出现?

转载 作者:太空宇宙 更新时间:2023-11-04 07:16:45 24 4
gpt4 key购买 nike

我有这张图片和 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 的中心,设置左右边距为自动,并使 img 标签显示为 block 。同样,当使用 margin left 和 right auto 将元素居中时,您必须为元素设置宽度。

在 h3 标签中,您只需添加 text-align: center

希望这能解决您的问题。

关于html - 为什么图片和 h3 标签在不同尺寸的屏幕上不按顺序出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50658896/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com