html 中的中心徽标

Question

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

Answer 1

为包含您的图片的 div 添加新的 CSS 规则：

.logo-row {
  text-align: center;
}

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;
}
.logo-row {
  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>

Answer 2

您需要在 logo-row class 中添加宽度并使用 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>

Answer 3

试试这个。

img {

display:block;
margin-right:auto;
margin-left:auto;

}

Answer 4

将此代码添加到您的 CSS 部分

.logo-row{ text-align: center; }

Answer 5

将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>

Answer 6

为 class 添加以下 CSS 规则应用于 img 元素（在您的例子中为 .logo）。

.logo {
    display: block;
    margin: 0 auto;
}

html 中的中心徽标

Center logo in html

html

css

image

header

alignment