问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

html 中的中心徽标

社区维基
1
新手上路，请多包涵

我在页面的标题中有一个徽标，我想居中。这是我的 HTML：

 body {
  width: 90%;
  margin: 0 auto;
}
header {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #b5b5b5;
}
.logo {
  width: 250px;
  height: 150px;
  text-align: center;
}

 <body>
  <header>
    <div class="row">
      <div class="logo-row">
        <img src="resources/img/logo.png" alt="logo" class="logo">
      </div>
    </div>
  </header>

原文由 Lila 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss图片headeralignment
阅读 250
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您需要向 logo-row 类添加宽度并使用 margin: 0 auto 。

 body {
    width: 90%;
    margin: 0 auto;
}

header {
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #b5b5b5;
}

.logo-row {
    width: 250px;
    margin: 0 auto;
}

.logo {
    width: 100%;
    height: 150px;
    text-align: center;
}

 <body>
  <header>
    <div class="row">
      <div class="logo-row">
        <img src="resources/img/logo.png" alt="logo" class="logo">
      </div>
    </div>
  </header>

原文由 Richard Hamilton 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

将 text-align: center 给 .logo-row ，您可能会获得所需的输出：

 header {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #b5b5b5;
}
.logo-row{
  text-align: center;
}
.logo {
  width: 250px;
  height: 150px;
  text-align: center;
}

   <header>
    <div class="row">
      <div class="logo-row">
        <img src="resources/img/logo.png" alt="logo" class="logo">
      </div>
    </div>
  </header>

原文由 Peyman Mohamadpour 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏