当前位置：文江博客话题详情

将徽标置于主页顶部居中

发布于 2025-01-11 12:29:27 字数 1455 浏览 0 评论 0原文

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

无畏 2025-01-18 12:29:27

让我尝试回答你的问题，我的朋友。
也许我有两种方法来回答你的问题。

我认为这是一个导航栏。

.navbar{
background-color: #878f99;
padding: 6px 8px;
display:flex;
justify-content:flex-start;
align-items:center;
}
.logo{
width:20px;
height:20px;
}

<div>
<div class="navbar">
<img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
</div>
</div>

只是为了达到最高的位置

.page{
diplay:flex;
}
.logo{
width:30px;
height:30px;
bottom:50%
right:50%;
}

<div class="page">
<img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
</div>

或者你可以喜欢这个

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid red;
}

div.b {
  position: absolute;
  top: -20px;
  border: 3px solid blue;
} 

div.c {
  position: absolute;
  top: 150px;
  border: 3px solid green;
} 
</style>
</head>
<body>

<h1>The top Property</h1>

<div class="a">This div element has position: relative;
  <div class="b">This div element has position: absolute and top: -20px.</div>
</div>

<div class="c">This div element has no parent element, has position: absolute and is placed 150 pixels down from the top of the document body.</div>

</body>
</html>

...

.page{
display:flex;
align-items:flex-start;
justify-content:center;
padding-top:10px;
}
.logo{
width:20px;
height:20px
}

<div class="page">
    <img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
    </div>

抱歉我的虚假如果我虚假的话

Let me to try answer your quetion my friend.
Maybe i have two way to answer your question.

I assume that is a navbar.

.navbar{
background-color: #878f99;
padding: 6px 8px;
display:flex;
justify-content:flex-start;
align-items:center;
}
.logo{
width:20px;
height:20px;
}

<div>
<div class="navbar">
<img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
</div>
</div>

Just make for top position

.page{
diplay:flex;
}
.logo{
width:30px;
height:30px;
bottom:50%
right:50%;
}

<div class="page">
<img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
</div>

or you can like this

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid red;
}

div.b {
  position: absolute;
  top: -20px;
  border: 3px solid blue;
} 

div.c {
  position: absolute;
  top: 150px;
  border: 3px solid green;
} 
</style>
</head>
<body>

<h1>The top Property</h1>

<div class="a">This div element has position: relative;
  <div class="b">This div element has position: absolute and top: -20px.</div>
</div>

<div class="c">This div element has no parent element, has position: absolute and is placed 150 pixels down from the top of the document body.</div>

</body>
</html>

...

.page{
display:flex;
align-items:flex-start;
justify-content:center;
padding-top:10px;
}
.logo{
width:20px;
height:20px
}

<div class="page">
    <img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
    </div>

sorry for my false if i false

回复收藏 0 原文

~没有更多了~

关于作者

温柔少女心

暂无简介

文章

评论

670 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文