如何防止 div 文本掉到容器底部？

Posted 2023-02-18

技术标签:

【中文标题】如何防止 div 文本掉到容器底部？【英文标题】：How to keep div text from dropping to bottom of container? 【发布时间】：2022-01-13 02:28:48 【问题描述】：

我想更改 div 文本的样式，同时将其保持在容器的顶部。我当前的脚本（如下）在容器顶部呈现 div 文本，没有样式（粗体、下划线、斜体等）

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

当我简单地将 div 文本包装在： <b>text</b> 它会自动将文本放到容器的底部。我不知道这是否与使用 Plotly 有关。

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

我试过了：

在 CSS 样式中添加 vertical-align: top; 调整容器的边距元素增加容器的大小以查看文本是否只是被“挤压”到底部

谁能发现我犯的错误或解决方法？

【问题讨论】：

【参考方案1】：

因为在第一个例子中：它是

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

在第二个 sn-p 中：它是

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

因此第二个 sn-p 中的标题低于 pieChart div

您需要在 pieChart div 之前插入 您的标题，见下文

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

【讨论】：

成功了，谢谢！您可以添加如何使图表标题文本以容器为中心吗？ <div style="text-align: center;"</div> 将图表标题与整个页面对齐您能否指定哪个容器，因为如果您应用text-align，它将应用于元素的子元素。所以在你的情况下，parentDiv 的孩子将在 parentDiv 内对齐中心我将其应用于您的 parentDiv，但“图表 1 标题”文本与整个页面对齐，而不是图表子页面很抱歉我没有收到您的查询，但是运行 sn-p 它可以完美运行。请参阅<style> 部分。该 css 现在适用于 parentDiv 而不是 chart1 并且其中已经有 text-align 。如果您复制样式部分和 html，它必须有效。我有多列图表，所以我需要每个图表标题都集中在每个图表上，这似乎没有实现。不过，我会将其标记为已接受的答案，因为它完成了我最初的问题。谢谢！

以上是关于如何防止 div 文本掉到容器底部？的主要内容，如果未能解决你的问题，请参考以下文章

如何让 div 在容器 div 的底部对齐 [重复]