Question

我在网站上有这个标识，它位于导航栏菜单之间的中间位置。

这是一张图片：

问题是当我切换到不同的显示器或分辨率时，徽标会移动。难道我做错了什么？如何在不同的分辨率之间修复它。

这是html代码：

＆＃13;

<main class="site-main">
	<center><img src="img/corelogo.png" alt="Post" height="180" width="180" style="position: absolute; top: -1px; left: 570px; margin: 0 auto;"></center>
        <section class="hero_area">
            <div class="hero_content">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
							<br>
							<br>
							<br>
							<br>
							<br>
							<br>
							<br>
                            <h1>TeamSpan Global Solutions</h1>
                            <h2>Your partner in building satellite workforce teams.</h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>

＆＃13;

Answer 1

首先，中心标记已被弃用。其次，您将它定位在第一个定位（非静态）祖先元素右边缘左侧570px处。我无法看到哪些样式应用于您的课程，因此我无法看到它会是什么。但它肯定会根据分辨率移动。

Answer 2

您是否已经听说过响应式设计？看，你必须发布你的CSS！你能在jsfiddle上写吗？

一些例子：

https:// codepen.io/bootstrapped/pen/dGPZvR (remove space)
https://www.bootply.com/mQh8DyRfWY
https:// codepen.io/davidcochran/pen/Fkwys (remove space)

不同的显示器/分辨率，不同的布局

2 个答案: