无涯教程网

按钮之间的HTML文本居中不正确

发布于12月14日

我正在做一个html程序，在我的页面顶部有一个框架，我试图在框架中的按钮之间居中放置文本，但它要么工作，但每个值都 break line ，要么根本不居中.

示例:

Not centering but is inline

.topBar p {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline;
}

Centering but with line breaks:

.topBar p {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
}

我见过类似的问题，但在网上找了一遍还没有找到答案，我甚至试着问人工智能，但也不起作用(是的，我知道人工智能的命中率很高).我已经try 了所显示的两种方法的许多组合.我认为有一种方法可以做到这一点，但我还没有找到.

推荐答案

您可以try 使用Flexbox，然后使用flex-grow属性来分配"钨"文本和按钮之间的剩余空间

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar p {
  flex-grow: 1;
  text-align: center;
}

<div class="topbar">
  <button>Button 1</button>
  <button>Button 2</button>
  <p>tungsten</p>
  <input type="search" placeholder="Search...">
</div>

Html相关问答推荐

从网络抓取中提取文本

有没有可能一个按钮，有焦点，然后再次点击它清除它的焦点，只是使用css？

如何使用css为动态用户输入矩阵添加背景色？

Angular 15 p-对话框不使用组件 Select 器呈现HTML

附加点的列表样式

获取标准的Python脚本，以便使用FASK对网站进行Flask

如何在css中旋转块时调整内容宽度、高度

为什么index.html在Django中有这样的名称？

视频重新加载而不是在 Swift 中暂停 WKWebView

为什么盒子不在div中显示？

在Angular中，类型"HTMLDivElement"不能分配给类型"Node"

当我将有序列表居中时，数字会跑到列表的另一行

如何使文本区域自动扩展到最大高度？

为什么在使用src与srcdoc时 iframe 内容高度呈现不同？

使用 sprite 的问题，字符 sprite 中的额外边距

需要禁用聚焦输入的工具提示(jquery)

发光效果html动画

每次按下按钮时减小字体大小的 jquery 函数

标题之间和之后的 Hr 线

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像？

实用课程推荐

相关教程推荐