Question

我在页面标题中有一个徽标，我想要居中。这是我的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;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您需要为logo-row课程添加宽度并使用margin: 0 auto。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

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

试试这个。

img {

display:block;
margin-right:auto;
margin-left:auto;

}

Answer 5

将此代码添加到CSS部分

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

Answer 6

为应用于img元素的类添加以下 CSS 规则（在您的情况下为.logo）。

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

html中心徽标

6 个答案: