Question

让我强调一点，我根本没有开发人员/编码人员，几乎不了解代码（甚至是html）。然而，我面临着使用Virtual Webite Optimizer为我们网站的某些页面构建ABtest并需要一些帮助的任务。我有一个包含三个元素的iFrame顶部栏 - 左侧是徽标，中间是文本字符串（标题），右侧是按钮。出于文本的目的（创建测试变体），我需要＆＃34;交换＆＃34;带按钮的文字，即。需要中间的按钮和右侧的文本字符串。当然，我可以在VWO wysiwyg编辑器中拖动按钮，但是这样，按钮变得绝对放置，并且当在不同的分辨率/设备上显示时它不会居中。那么如何通过代码完成这项工作呢？当我显示各个元素的html代码时，我得到了这个：

NAV

<nav class="simple-top-bar"> <div class="simple-top-bar__title"> <a class="logo vwo_1489874617112" href="http://Specimen.info" title="Specimen.info"> <img alt="Specimen.info" height="36" src="http://picture.net/pictures/logos/stickybar/xyz.svg"><span class="hide-for-small-only">Specimen.info</span> </a> </div> <a href="http://www.specimen.info/specimen/specimen" class="button button--primary button--noshadow medium right vwo_1489874134345 vwo_1489927072017" data-contact-button="" data-form-mr="specimen" data-form-name="Specimen" data-form-channel="1" data-form-source="outframe">Contact us</a> <div class="simple-top-bar__center show-for-medium vwo_1489927071979 vwo_1489873911537">Specimen</div> </nav>

文字（我需要对齐）

<div class="simple-top-bar__center show-for-medium">Specimen</div>

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

<a href="http://www.link.info/specimen/specimen" class="button button--primary button--noshadow medium right" data-contact-button="" data-form-mr="specimen" data-form-name="Specimen" data-form-channel="1" data-form-source="outframe">Contact us</a>

非常感谢您提前帮助砍刀！

Answer 1

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

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

哦，顺便说一下，如果你不能将所有代码都放在一行上，我将不胜感激。这很难读。

<小时/> 另一种方法是使用float。

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

#logo和#text的行为与绝对定位的方式完全相同。

如何在NAV元素中水平居中按钮

1 个答案: