Question

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Name of your Animal</title>
    <link rel = "stylesheet"
   type = "text/css"
   href = "style1.css" />

   </head>
   <body>

    <img src="jags2.png" alt="jaguar">
    <img align="right">


    <p> Add some info on your animal </p>
  </body>
</html>

我正在尝试制作一个有关美洲虎的网站，但我插入了一张有关美洲虎的图片，但它一直位于左上方。我正在尝试使其居中对齐，但无法正常工作，请帮助。

Answer 1

尝试关注参考：https://www.w3schools.com/css/css_align.asp

.center img {
    margin: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
}

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Name of your Animal</title>
    <link rel = "stylesheet"
   type = "text/css"
   href = "style1.css" />

   </head>
   <body>
    <div class="center">
        <img  src="https://tpc.googlesyndication.com/simgad/11423376298074074248" alt="jaguar">
    </div>

  </body>
</html>

Answer 2

在HTML中，#define MAX_FLIGHTS 100 ... struct Flight flights[MAX_FLIGHTS ]; int n_flights = 0; ... while (!feof(fp) && (n_flights < MAX_FLIGHTS-1)) { if (fscanf(fp, "%d\n", &flights[n_flights].flightNum) != 1) error_handler(); if (fscanf(fp, "%29s\n", flights[n_flights].destination) != 1) error_handler(); if (fscanf(fp, "%14s\n", flights[n_flights].departDay) != 1) error_handler(); ++n_flights; } ...和<中定义了一个对象。

因此>仅具有两个属性：<img src="jags2.png" alt="jaguar">和src="jags2.png"。在下面的行中，您只需创建一个只有一个属性alt="jaguar"的 new img标签。您看不到第二张图片，因为它甚至没有align="right"属性，因此它不会加载任何图片。要为jags2.png赋予这三个属性，您必须将所有属性都写入同一个Tag：

src

那会使您的图片显示在右侧。

但是您说过您希望它位于中心位置。实际上，这并不容易，因为<img src="jags2.png" alt="jaguar" align="right">不起作用。为此，您必须使用align="center"参数，如下所示：

style

...或者您开始使用单独的CSS文件，在大多数情况下，这是最佳选择。

Answer 3

这是您在原始代码段中包含的标题。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<p class="center">
  <img src="https://www.lazoo.org/wp-new/wp-content/uploads/2014/02/jaguar_tm.jpg" alt="jaguar"><br>
  Add some info on your animal
</p>

居中png图像

3 个答案: