在Safari瀏覽器中選擇下拉文本對齊中心？

Question

選擇下拉CSS

display: block;
height: 60px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
min-height: 60px;
text-align: center;

選項文本在Firefox瀏覽器中居中，但不在safari中居中，有什么解決方案可以使文本在safari瀏覽器中居中對齊嗎？

Answer 1

您可以使用頂部和底部填充，並刪除高度以使文本在中間對齊。

padding: 30px;

Answer 2

添加填充並刪除高度。 例如，這是您提供的代碼的更新：

display: block;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

更新

不幸的是，在Safari（iPhone）中無法使用填充功能。 在這種情況下，請嘗試使用文本縮進而不是填充。 並添加下拉菜單寬度的文本縮進。 請查看您提供的代碼的更新：

display: block;
height: 60px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
min-height: 60px;
width: 220px; /* width of 200px plus the 20px for the text indent */
text-indent: 20px;

Answer 3

如果您不顧一切，請使用此一個Codepen Crossbrowser Select

 $(document).ready(() => { $('.crossbrowser-select').on('click', crossbrowserSelectOnClickEvent); $('.crossbrowser-select').on('mouseWheelDown', crossbrowserSelectOnMouseWheelDownEvent); $('.crossbrowser-select').on('mouseWheelUp', crossbrowserSelectOnMouseWheelUpEvent()); $('.crossbrowser-select > .option').on('click', crossbrowserSelectItemOnClickEvent); $('.crossbrowser-select').focusout('click', crossbrowserSelectOnFocusOutEvent); //Firefox $('.crossbrowser-select').bind('DOMMouseScroll', function(e){ if (e.originalEvent.detail > 0) { //scroll down chooseNextItem($(this)); } else { //scroll up choosePreviousItem($(this)); } //prevent page fom scrolling return false; }); //IE, Opera, Safari $('.crossbrowser-select').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta < 0) { //scroll down chooseNextItem($(this)); }else { //scroll up choosePreviousItem($(this)); } //prevent page fom scrolling return false; }); $('.crossbrowser-select').keyup(function(event) { if (event.keyCode === 32) { //Enter event.preventDefault(); toggleSelect($(this)); } if (event.keyCode === 38) { //Up event.preventDefault(); choosePreviousItem($(this)); } if (event.keyCode === 40) { //Down event.preventDefault(); chooseNextItem($(this)); } }); }); /* METHODS ************************************************************************************************************/ function toggleSelect(select) { if (select.hasClass('expanded')) { select.toggleClass('expanded'); select.children('.option').removeClass('shown'); } else { select.toggleClass('expanded'); select.children('.option').each(function () { const item = $(this); const select = item.parent(); if (item.attr('value') !== select.attr('value')) { item.toggleClass('shown'); } }); } } function collapseSelect(select) { select.removeClass('expanded'); select.children('.option').each(function () { $(this).removeClass('shown'); }); } function chooseNextItem(select) { collapseSelect(select); if (select.attr('value') !== '') { const selectedItem = select.children('div[value=\\'' + select.attr('value') + '\\']'); const nextSibling = selectedItem.next('.option'); if (nextSibling) { select.attr('value', nextSibling.attr('value')); select.children('.visual-option').html(nextSibling.html()); } } else { selectFirstItem(select); } } function choosePreviousItem(select) { collapseSelect(select); if (select.attr('value') !== '') { const selectedItem = select.children('div[value=\\'' + select.attr('value') + '\\']'); const prevSibling = selectedItem.prev('.option'); if (prevSibling) { select.attr('value', prevSibling.attr('value')); select.children('.visual-option').html(prevSibling.html()); } } else { selectFirstItem(select); } } function chooseItem(item) { const select = item.parent('.crossbrowser-select'); select.children('.visual-option').html(item.html()); select.attr('value', (item.attr('value'))); } function selectFirstItem(select) { const firstItem = select.children('.option').first(); select.attr('value', firstItem.attr('value')); select.children('.visual-option').html(firstItem.html()); } /* Events *************************************************************************************************************/ function crossbrowserSelectOnClickEvent() { toggleSelect($(this)); } function crossbrowserSelectItemOnClickEvent() { chooseItem($(this)); } function crossbrowserSelectOnMouseWheelDownEvent() { chooseNextItem($(this)); } function crossbrowserSelectOnMouseWheelUpEvent() { choosePreviousItem($(this)); } function crossbrowserSelectOnFocusOutEvent() { collapseSelect($(this)); } 

 .crossbrowser-select { text-align: center; cursor: pointer; border: 1px transparent solid; border-bottom: 1px solid #70ccd9; border-radius: 10px; } .crossbrowser-select.expanded { color: #70ccd9; border-top: 1px solid #70ccd9; } .crossbrowser-select:hover, .crossbrowser-select:focus, .crossbrowser-select:active { outline: none; border: 1px solid white; background-color: transparent; } .crossbrowser-select > .option { display: none; color: white; } .crossbrowser-select > .option.shown { display: block; } 

 <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body style="background-color: black; color: white; padding: 50px"> <div class="col-4 text-center"> <div style="margin-bottom: 20px">Previous random element</div> <div value="" class="crossbrowser-select" tabindex="0"> <div class="visual-option">Select Item from list</div> <div class="option" value="1option">Option1</div> <div class="option" value="2option">Option2</div> <div class="option" value="3option">Option3</div> </div> <div style="margin-top: 20px">Next random element</div> </div> <script src="https://code.jquery.com/jquery-1.12.3.js" ></script> </body> </html>