Question

我想在一行上将3个文本元素放在一起，并将组合元素置于屏幕中心。

目前我的代码是

<div class="area">
  <h1 align="center">Heading</h1>
  <h2 align="center" id="text1"></h2>
  <h2 id="text2" ></h2>
  <h2 id="text3" ></h2>
  <hr/>
</div>

text1-3字符通过javascript（无jQuery）填充，即：

document.getElementById('text1').innerHTML = newText;

我可以在调用HTML页面之前计算每个文本元素中将包含多少个字符，这样就可以计算总数，如果需要在屏幕上显示组合文本区域。

目前Text1元素居中，但text2和3位于新行，位于屏幕的LHS上。

有什么想法吗？

Answer 1

如果您想在同一行上创建所有h2，请使用：

h2 {display: inline-block;}

给父母：

.area {text-align: center;}

注意： align="center"已弃用，可能无法保持一致。避免使用它。

您的问题也不清楚。你想要所有三件事都在同一条线或不同的线上吗？将所有内容集中在一起，只需以下即可：

.area {text-align: center;}

要使所有内容都在同一行，请使用第一个代码。

居中示例

＆＃13;

.area {text-align: center;}

＆＃13;

<div class="area">
  <h1>Heading</h1>
  <h2 id="text1">text1</h2>
  <h2 id="text2">text2</h2>
  <h2 id="text3">text3</h2>
  <hr/>
</div>

＆＃13;

一行标题

＆＃13;

.area {text-align: center;}
h2 {display: inline-block;}

＆＃13;

<div class="area">
  <h1>Heading</h1>
  <h2 id="text1">text1</h2>
  <h2 id="text2">text2</h2>
  <h2 id="text3">text3</h2>
  <hr/>
</div>

＆＃13;

HTML将多个元素放在一行上并居中显示在屏幕上

1 个答案: