如何在導航元素中水平居中放置按鈕

Question

讓我強調一點，我根本不是開發人員/編碼人員，並且幾乎不了解代碼（甚至是html）。 但是，我仍然面臨使用Virtual Webite Optimizer為我們網站的某些頁面構建ABtest的任務，並且需要一些幫助。 我有一個iFrame頂部欄，包含三個元素-左側為徽標，中央為文本字符串（標題），右側為按鈕。 出於文本目的（創建測試變體），我需要使用按鈕“交換”文本，即。 需要中間的按鈕和右側的文本字符串。 當然，我可以在VWO所見即所得編輯器中拖動按鈕，但是那樣一來，該按鈕就變成了絕對放置的位置，並且在不同分辨率/設備上顯示時不會居中。 那么如何通過代碼做到這一點呢？ 當顯示單個元素的html代碼時，我得到以下信息：

資產凈值

<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行為與從正常流程中刪除時的位置完全一樣。