时间戳

首页 > 解决方案 > 使用 display: inline 添加第二个元素后无法居中 h1；

html - 使用 display: inline 添加第二个元素后无法居中 h1；

问题描述

在我当前的应用程序（下图）中，我正在尝试添加一个按钮来导航。但是按钮需要像h1一样上线。问题是，添加按钮后，我的 h1 的 CSS 属性text-align: center向右移动，因为我添加了新按钮。

在此处输入图像描述

我该怎么做才能使 h1 再次居中？

.backButton {
  margin-top: 40px;
  float: left;
  margin-left: 25%;
}

.titleAndBackButton {
  width: 100%;
  display: inline;
  margin-top: 40px;
}

h1 {
  margin-top: 40px;
  display: block;
  text-align: center;
}
<div class="titleAndBackButton">
  <button pButton type="button" icon="pi pi-arrow-left" class="p-button-outlined backButton"></button>
  <h1>Edit Your Category</h1>
</div>

我非常感谢提供的每一个帮助！

标签： htmlcss

解决方案

这是基于您的代码的粗略flex解决方案，我建议使用,grid或absolute定位。

您margin-left: 25%用于.backButton选择器。由于这个原因，h1标签被丢弃。将规则left与规则结合使用position: relative。移除margin-left: 25%，并将这些 css 规则添加到.backButton选择器中：

position: relative;
left: 25%;

使用规则left，position: relative而transform: translateX(50%)对于标签h1使用规则float: right。将这些规则添加到标签h1：

float: right;
position: relative;
left: -50%;
transform: translateX(50%);


.titleAndBackButton {
    width: 100%;
    display: inline;
    margin-top: 40px;
}

.backButton {
    margin-top: 40px;
    float: left;
    position: relative;
    left: 25%;
}

h1 {
    margin-top: 40px;
    display: block;
    text-align: center;
    float: right;
    position: relative;
    left: -50%;
    transform: translateX(50%);
}
<div class="titleAndBackButton">
    <button pButton type="button" icon="pi pi-arrow-left" class="p-button-outlined backButton"></button>
    <h1>Edit Your Category</h1>
</div>

推荐阅读