Jquery 如何将DIV组与页面上的其他DIV对齐

我已经接管了一堆TIBCO Spotfire[2]模板。基于其中一个，我们收到了一个创建真正类似的东西的请求

不幸的是，我在修改代码时遇到了麻烦，所以每个元素都是完全垂直对齐的。在源代码方面，没有问题，因为需要处理的选项卡更少

目前看来： 预期的行为是有选项卡，与不可用的图像和文本位于同一行

我曾经尝试过使用HTML/CSS代码，但由于我不是这方面的专家，所以我来这里寻找一个有用的灵魂

$.topBar.css{ 浮动：底部， 背景色：003DAF， 身高：100%， 字体系列：Segoe UI Light }; $.btnGroup.css{ 宽度：90%， 剩余利润率：2%， 显示：内联块 }; $h3.css{ 字体系列：Segoe UI Light， 字体大小：12px， 字体样式：正常， 字体大小：粗体， 颜色：ffffff， 文本对齐：左， 边缘顶部：1米， 边缘底部：0.5em， 左边距：0， 右边距：0 }; $h4.css{ 字体系列：Segoe UI Light， 字体大小：12px， 字体样式：正常， 字体大小：粗体， 颜色：000000， 文本对齐：左， 最高利润率：0， 边际下限：0， 左边距：0， 右边距：0 }; $h5.css{ 字体系列：Segoe UI Light， 字体大小：13px， 字体样式：正常， 字体大小：粗体， 颜色：ffffff， 文本对齐：左， 边缘顶部：0.5em， 边际下限：0， 左边距：0， 右边距：0 }; $h6.css{ 字体系列：Segoe UI Light， 字体大小：13px， 字体样式：正常， 字体大小：粗体， 颜色：ffffff， 文本对齐：右， 边缘顶部：0.5em， 边际下限：0， 左边距：0， 右边距：0 }; $.hiddenButtons.css{ 显示：无 }; $.logo.css{ 浮动：左 }; $'.main按钮组'.css{ “显示”：“-webkit flex”， “边距”：“0 0 1rem”， “页边距底部”：“0px”， ‘颜色’：‘fff’， “文本装饰”：“无” }; $'.main按钮组.按钮组'.css{ “显示”：“内联块”， '位置'：'相对'， “-webkit flex”：“1”， “-webkit对齐项目”：“居中”， “-ms flex align”：“中心”， “-webkit验证内容”：“中心”， “-ms flex pack”：“中心”， “最大宽度”：“100em”， “padding”：“0.786em 0”， “字体系列”：“Segoe UI Light”， “字体大小”：“0.7rem”， “字体大小”：“600”， “文本对齐”：“居中”， ‘颜色’：‘fff’， “背景色”：“003daf”， “字母间距”：“1px”， '光标'：'指针'， “过渡”：“背景色300毫秒缓减，颜色300毫秒缓减，边框颜色300毫秒缓减”， “-webkit外观”：“无”， “-moz外观”：“无”， “-webkit用户选择”：“无”， “-moz用户选择”：“无”， “-ms用户选择”：“无”， “用户选择”：“无”， “-webkit touch callout”：“无”， “-webkit点击突出显示颜色”：“透明”， “-webkit转换”：“translate3d0，0，0”， “transform”：“translate3d0,0,0”， “溢出”：“隐藏” }; $'.active'.css{ “背景色”：“09f” }; $.button-group.hoverfunction{ $this.css{ “边框颜色”：“09f”， “背景色”：“09f” }; }，功能{ $this.css{ “边框颜色”：“09f”， “背景色”：“003daf” }; }; $.active.hover函数{ $this.css{ “边框颜色”：“09f”， “背景色”：“09f” }; }，功能{ $this.css{ “边框颜色”：“09f”， “背景色”：“09f” }; }; $.button-group.focusfunction{ $this.css{ “边框颜色”：“09f”， “背景色”：“09f” }; }，功能{ $this.css{ “边框颜色”：“09f”， “背景色”：“003daf” }; }; 一线 第二线 第三行 表1 表2 表3 表4 表5 表6 表7 表8 表9 表10 表11 表2 看到更新的小提琴了吗

删除div的宽度并添加flex

---

你必须使用内联样式吗？或者您可以使用一个单独的css样式表？您应该在JavaScript jQuery中设置给定元素的css吗？您可能希望将所有与CSS相关的编码移动到应用程序的CSS部分。此外，在使用HTML时，不必使用大写字母。如果我正确理解了您的问题，您是否希望所有选项卡都以水平居中的方式排列？请详细说明您的问题。如果可能，请向我们提供一个示例，说明您希望如何定位元素。用户确实声明他们仍在处理代码，并将对其进行清理。我不认为这个问题应该被否决，因为用户会用他们的代码来演示和解释他们的问题。@Barrosy基本上，这是在Spotfire中实现这一点最简单的方法。我必须在将其移动到JavaScript/jQuery或直接在HTML代码上方实现之间做出选择，不幸的是，无法添加外部文件，因为工具根本不允许这样做。@glaeran仅供参考，这是可能的

---

o使用外部样式表，但它需要一些愚蠢的JQuery技巧。请看我对另一个问题的回答：选项卡将与顶部对齐，这让人怀疑OP是否需要这种行为。也许OP希望这些标签居中？@Barrosy from user:“预期的行为是有标签，与旁边不可用的图像和文本在同一行中。”这是在同一行上，但OP没有说明它应该居中还是与顶部或底部对齐。在这里，处于同一条线上可能意味着很多事情。将它们集中在一起将非常高兴能够帮助@glaeran。快乐编码

<DIV style="display:flex;; width:90%">
    <DIV style='float:left;'>
      <DIV style='float:left;'>
        <H3>First Line
          <BR> Second Line
          <BR> Third Line</H3>
      </DIV>
    </DIV>

$('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none',
   'height': '100%',
    'align-items': 'center'
});