1

Есть блок div с внутренним элементом h1 и не получается данный элемент распологать например наверху/снизу/слева/ или на одном уровне с соседними блоками, элемент как будто лежит внизу и никаким position или align не могу его расположить как угодно мне :/

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

6
  • Ваш код не запускается на сайте. Воспользуйтесь встроенным редактором.
    – nazarpunk
    Commented 1 февр. 2022 в 10:54
  • пробовал на встроенном редкаторе, не получается /
    – almaz
    Commented 1 февр. 2022 в 11:39
  • 1
    А вы переменные data, labels, safe определять пробовали?
    – nazarpunk
    Commented 1 февр. 2022 в 11:47
  • ага ) .........
    – almaz
    Commented 1 февр. 2022 в 11:55
  • А свой пример в браузере запускали? Uncaught SyntaxError: Unexpected token '{'
    – nazarpunk
    Commented 1 февр. 2022 в 12:00

1 ответ 1

1

Сделайте блок-обёртку, задайте ему 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
  • 1
    О спасибо Вам мил человек ))
    – almaz
    Commented 2 февр. 2022 в 5:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.