主页 / 问题 / 1377332
Accepted
almaz
Asked:2022-07-01 18:32:34 +0000 UTC2022-07-01 18:32:34 +0000 UTC

html css如何正确定位页面上的元素

  • 772

有一个带有内部 h1 元素的 div 块，并且无法放置此元素，例如，在顶部/底部/左侧/或与相邻块相同的级别，该元素似乎位于下方，我可以' t 以我喜欢的任何位置或对齐方式定位它：/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

  <title>Document</title>

</head>

<body>
  <div style="display: inline-block;">
    <canvas id="layanan" width="340px" height="340px"></canvas>
  </div>

  <div style="display: inline-block;">
    <h1> второй элемент </h1>
    <!-- как выравнивать данный элемент по вертикали/гор-ли -->
  </div>


  <div style="display: inline-block;">
    <canvas id="layanan_subbagian" width="440px" height="340px"></canvas>
  </div>
</body>


<script>
  $(function() {
    let ctx = document.getElementById("layanan").getContext('2d');
    let data = {
      datasets: [{
        data: {
          {
            data | safe
          }
        },
        backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
      }],
      labels: {
        {
          labels | safe
        }
      }
    };
    let myDoughnutChart = new Chart(ctx, {
      type: 'pie',
      data: data,
      options: {
        responsive: false,
        maintainAspectRatio: false,
        legend: {
          position: 'bottom',
          labels: {
            boxWidth: 12
          }
        }
      }
    });

    let ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
    let data_2 = {
      datasets: [{
        data: {
          {
            data | safe
          }
        },
        backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
      }],
      labels: {
        {
          labels | safe
        }
      }
    };
    let myDoughnutChart_2 = new Chart(ctx_2, {
      type: 'bar',
      data: data_2,
      options: {
        responsive: false,
        maintainAspectRatio: false,
        legend: {
          position: 'bottom',
          labels: {
            boxWidth: 12
          }
        }
      }
    });
  });
</script>

</html>

html

1 个回答

  1. Best Answer

    制作一个包装块，定义它display: flex并根据需要对齐它。或者对 执行相同的操作<body>，如下例所示：

    $(function() {
  let ctx = document.getElementById("layanan").getContext('2d');
  let data = {
    datasets: [{
      data: [12, 19, 3, 5, 2, 3, 10, 6],
      backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
    }],
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Purple', 'Orange']
  };
  let myDoughnutChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
        labels: {
          boxWidth: 12
        }
      }
    }
  });

  let ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
  let data_2 = {
    datasets: [{
      data: [12, 19, 3, 5, 2, 3, 10, 6],
      backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
    }],
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Purple', 'Orange']
  };

  let myDoughnutChart_2 = new Chart(ctx_2, {
    type: 'bar',
    data: data_2,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
        labels: {
          boxWidth: 12
        }
      }
    }
  });
});
    body {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

<div style="position: relative; height:40%; width:80%">
  <canvas id="layanan"></canvas>
</div>

<div style="text-align: center">
  <h1> второй элемент </h1>
</div>

<div style="position: relative; height:40%; width:80%">
  <canvas id="layanan_subbagian"></canvas>
</div>

    $(function() {
  let ctx = document.getElementById("layanan").getContext('2d');
  let data = {
    datasets: [{
      data: [12, 19, 3, 5, 2, 3, 10, 6],
      backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
    }],
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Purple', 'Orange']
  };
  let myDoughnutChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
        labels: {
          boxWidth: 12
        }
      }
    }
  });

  let ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
  let data_2 = {
    datasets: [{
      data: [12, 19, 3, 5, 2, 3, 10, 6],
      backgroundColor: ['#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3', 'lightgreen', 'lightblue', 'red'],
    }],
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Purple', 'Orange']
  };

  let myDoughnutChart_2 = new Chart(ctx_2, {
    type: 'bar',
    data: data_2,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
        labels: {
          boxWidth: 12
        }
      }
    }
  });
});
    body {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

<div style="position: relative; height:80%; width:40%">
  <canvas id="layanan"></canvas>
</div>

<div style="text-align: center">
  <h1> второй элемент </h1>
</div>

<div style="position: relative; height:80%; width:40%">
  <canvas id="layanan_subbagian"></canvas>
</div>

    • 1

相关问题