个人中心
gpt4 book ai didi

html - html 中的中心 Logo

转载 作者：太空宇宙 更新时间：2023-11-04 16:10:48 25 4
gpt4 key购买 nike

我在页面的标题中有一个 Logo ，我想使其居中。这是我的 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>

最佳答案

您需要为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>

关于html - html 中的中心 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35162053/

25 4 0
文章推荐： c++ - 在 move 分配中使用 std::swap() 应该会导致无限递归(和原因)，但它是 Stroustrup 书中的一个例子
文章推荐： javascript - Normalizr v3 和 JSON api
文章推荐： 底部对齐内容的 CSS 布局问题
文章推荐： javascript - 如何在提交按钮上同时使用 dvloading 和 required
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com