How to keep div text from dropping to bottom of container?-CodePudding

I would like to change the styling of the div text while keeping it at the top of the container. My current script (below) renders the div text at the top of the container without styling (bolding, underlining, italicizing, etc)

<head>
 <script src="https://cdn.plot.ly/plotly-2.6.3.min.js"></script>
 <style>
  #chart1 {
     width: 360px;
     height: 400px;
     position: absolute;
     top: 100px;
     left: 0px;
     text-align: center;
   }
 </style>
</head>

<body>
 <div id="chart1">Chart 1 Title</div>
 <script>
  CHART1 = document.getElementById('chart1')
  Plotly.newPlot( CHART1,
     [{
       type: 'pie',
       values: [60,40]
     }],
     {margin: {t:0}}
  )
 </script>
</body>

When I simply wrap the div text in: <b>text</b> it drops the text to the bottom of the container automatically. I can't tell if this is has to do with Plotly being used.

<head>
 <script src="https://cdn.plot.ly/plotly-2.6.3.min.js"></script>
 <style>
  #chart1 {
     width: 360px;
     height: 400px;
     position: absolute;
     top: 100px;
     left: 0px;
     text-align: center;
   }
 </style>
</head>

<body>
 <div id="chart1"><b>Chart 1 Title</b></div>
 <script>
  CHART1 = document.getElementById('chart1')
  Plotly.newPlot( CHART1,
     [{
       type: 'pie',
       values: [60,40]
     }],
     {margin: {t:0}}
  )
 </script>
</body>

I have tried:

adding vertical-align: top; to the CSS styling
adjusting the margin elements of the container
increasing the size of the container to see if the text was simply getting "squeezed" to bottom

Can anyone spot the mistake I've made or the workaround for this?

CodePudding user response：

Since in the first example: it is

<div id="chart1"> Chart 1 Title <div> pieChart here </div> </div>

while in second snippet: it is

<div id="chart1"> <div> pieChart here </div> <b> Chart 1 Title </b> </div>

Therefor title in the second snippet is below pieChart div

you need to insert your title before pieChart div, see below

<head>
 <script src="https://cdn.plot.ly/plotly-2.6.3.min.js"></script>
 <style>
  #parentDiv {
     width: 360px;
     height: 400px;
     position: absolute;
     top: 100px;
     left: 0px;
     text-align: center;
   }
 </style>
</head>

<body>
 <div id="parentDiv">
   <b>Chart 1 Title</b>
   <div id="chart1"></div>
 </div>
 <script>
  CHART1 = document.getElementById('chart1')
  Plotly.newPlot( CHART1,
     [{
       type: 'pie',
       values: [60,40]
     }],
     {margin: {t:0}}
  )
 </script>
</body>