Javascript 如何在导航元素中水平居中放置按钮

让我强调一下，我根本不是开发人员/程序员，几乎不懂代码（甚至html）。然而，我面临的任务是使用虚拟website优化器为我们网站的某些页面构建ABtest，需要一些帮助。 我有一个iFrame顶栏，它包含三个元素：左边是徽标，中间是文本字符串（标题），右边是按钮。为了文本的目的（创建测试变体），我需要用按钮“交换”文本，即需要中间的按钮和右边的文本字符串。当然，我可以在VWO wysiwyg编辑器中拖动按钮，但这样，按钮就完全放置好了，并且在不同分辨率/设备上显示时不会居中。那么我如何通过代码来实现这一点呢？当我显示单个元素的html代码时，我得到以下结果：

导航

样本

文本（我需要右对齐）

样本

按钮（我需要水平居中）：

---

提前非常感谢您帮助noob走出困境

如果对定位有疑问，请使用。。。flexbox

nav {
    display: flex;
    justify-content: space-around;
    align-items: center; /* Depends */
}

哦，顺便说一句，如果你没有把所有的代码都放在一行，我会很感激的。很难读。

---

另一种方法是使用

float

#logo {
    float: left;
}
#text {
    float: right;
}
#button {
    margin: 0 auto;
}

---

#徽标

和

#文本

的行为将与绝对定位的行为完全相同，它们将从正常流程中移除。

如果对定位有疑问，请使用。。。flexbox

nav {
    display: flex;
    justify-content: space-around;
    align-items: center; /* Depends */
}

哦，顺便说一句，如果你没有把所有的代码都放在一行，我会很感激的。很难读。

---

另一种方法是使用

float

#logo {
    float: left;
}
#text {
    float: right;
}
#button {
    margin: 0 auto;
}

#徽标

和

#文本

的行为将与从正常流程中取出的绝对位置完全相同

#logo {
    float: left;
}
#text {
    float: right;
}
#button {
    margin: 0 auto;
}