선택란에 텍스트를 가운데로 넣을 수 있습니까?

sourcecode

선택란에 텍스트를 가운데로 넣을 수 있습니까?

copyscript 2023. 10. 26. 21:20

선택란에 텍스트를 가운데로 넣을 수 있습니까?

나는 이것을 시도했습니다: http://jsfiddle.net/ilyaD/KGcC3/

HTML:

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSS:

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

보시는 것처럼, 효과가 없습니다.선택 상자에 텍스트 중심을 맞추는 CSS 전용 방법이 있습니까?

Chrome에 대한 부분적인 해결책이 있습니다.

select { width: 400px; text-align-last:center; }

선택한 옵션의 중심은 맞추지만 드롭다운 내부의 옵션은 맞추지 않습니다.

그건 오른쪽 정렬용입니다.사용해 보십시오.

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

에 대한 브라우저 지원text-align-last속성은 여기에서 확인할 수 있습니다: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp 사파리만 여전히 지원하지 않는 것 같습니다.

네, 가능합니다.text-align-last를 사용할 수 있습니다.

text-align-last: center;

2020년, 사용 중:

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

CSS 규칙을 선택 클래스에 넣어야 합니다.

CSS 텍스트 독립 사용

예

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

CSS 코드

select { text-indent: 5px; }

이것은 일반 CSS로는 불가능하고, 완전히 크로스 브라우저 호환도 불가능할 것 같습니다.

그러나 jQuery 플러그인을 사용하여 드롭다운 스타일을 지정할 수 있습니다.

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

이 플러그인은 다음을 숨깁니다.select요소, 작성span사용자 정의 드롭다운 목록 스타일을 표시하기 위해 요소 등을 이동합니다.저는 당신이 스판 등의 스타일을 변경하여 아이템을 중앙 정렬할 수 있다고 확신합니다.

사용 방법:

select {

text-align-last: center;
padding-right: 29px;

}

select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}

<select>
   <option value="">(please select a state)</option>
   <option class="lt" value="--">none</option>
   <option class="lt" value="AL">Alabama</option>
   <option class="lt" value="AK">Alaska</option>
   <option class="lt" value="AZ">Arizona</option>
   <option class="lt" value="AR">Arkansas</option>
   <option class="lt" value="CA">California</option>
   <option class="lt" value="CO">Colorado</option>
</select>

이 JS 기능은 당신에게 적합할 것입니다.

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

풀 코드펜 여기: http://codepen.io/anon/pen/NxyovL

저는 항상 CSS로만 작동시키기 위해 아래의 해킹을 피해왔습니다.

padding-left: 45%;
font-size: 50px;

패딩은 텍스트 중앙에 위치하며 텍스트 크기에 맞게 조정 가능합니다 :)

이것은 분명히 검증 관점에서 100% 정확한 것은 아닙니다. 제 생각에 하지만 그것은 효과가 있습니다. :)

텍스트 길이가 비슷한 옵션을 가진 목록이 있는 경우 대체 "가짜" 솔루션:

padding-left: calc(50% - 1em);

이것은 Chrome, Firefox, Edge에서 작동합니다.여기서 방법은 텍스트를 왼쪽에서 가운데로 밀어낸 다음 px, em 또는 옵션 텍스트의 길이 절반을 빼는 것입니다.

베스트 솔루션 IMO(2017년)는 여전히 JS를 통해 선택을 대체하고 있으며, 크로스 브라우저 지원을 위해 div 등으로 자신만의 가짜 선택 상자를 만들고 클릭 이벤트를 바인딩합니다.

시도해 보십시오.

select {
    padding-left: 50% !important;
    width: 100%;
}

중심 맞추기는 아니지만 위의 예를 사용하면 선택 상자에서 왼쪽 여백을 만들 수 있습니다.

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

효과가 있었습니다.

text-align: center;
text-align-last: center;

커스터마이징이 불가능합니다.<select>아니면<option>많이. (크로스 브라우저) 유일한 방법은 div와 css/js로 드롭다운을 수동으로 만들어 유사한 것을 만드는 것입니다.

해결책을 찾지 못한 경우 angularjs에서 이 트릭을 사용하거나 js를 사용하여 선택한 값을 div의 텍스트와 매핑할 수 있습니다. 이 솔루션은 angular에 대해 전체 cs를 준수하지만 select와 div 사이의 매핑이 필요합니다.

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

전화 공백에서 이 해결책을 찾는 데 하루가 걸렸기 때문에 누군가에게 유용할 수 있기를 바랍니다.

옵션 텍스트의 중심을 선택 항목 내에 둘 수는 없지만, 선택 항목 상단에 동일한 효과로 절대적으로 위치한 눈금을 배치할 수 있습니다.

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

div와 select가 모두 문서에서 고정된 위치에 있는지 확인합니다.

선택한 너비: 자동 및 패딩 없음을 사용하여 텍스트 길이를 확인합니다.저는 제 선택에 100% 사용 가능한 너비를 사용하고 있고 모든 옵션의 길이가 동일합니다. 이를 통해 매우 간단한 CSS를 사용할 수 있습니다.

text-indent는 padding-left와 유사하게 텍스트를 왼쪽에서 이동합니다.
120px는 제 텍스트 길이입니다 - 중심을 잡고 싶어서 그 크기의 절반과 선택한 크기의 절반을 가져가시고 50% - 60px로 남겨주세요

select{
  width: 100%;
  text-indent: calc(50% - 60px);
}

옵션의 크기가 다르면 어떻게 하죠?

가능한 일이지만, 해결책이 그리 좋지는 않을 것입니다.
옵션 간의 차이가 5자가 아닌 경우 이전 솔루션을 사용하면 중앙 집중화에 가까워질 수 있습니다.

그래도 중심을 좀 더 정확하게 잡아야 한다면 이렇게 할 수 있습니다.

다음 수업 준비:

.realWidth{
   width: auto;
}

요소 선택에 수신기 변경 시 적용

해당 청취자는 선택 요소에 .realWidth를 적용합니다.

const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");

옵션의 실제 너비에 액세스할 수 있습니다.

const widthOfSelect = selectRef.getBoundingClientRect().width / 2;

widthOfSelect는 원하는 너비입니다.전역/성분 변수에 저장합니다.

실제 너비를 제거합니다. 더 이상 필요 없습니다.

selectRef.classList.remove("realWidth");

리액트를 사용하고 있는데 바닐라에 효과가 있을지 잘 모르겠습니다. 그렇지 않다면 다른 해결책을 찾아야 합니다.

<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>

그러나 나쁜 해결책은 js로 CSS 클래스를 만들어서 머리에 쓰는 것일 수도 있습니다.

PROS:

아마 효과가 있을 겁니다. 동적 솔루션을 사용해 본 적은 없지만 효과가 있을 겁니다.

반대:

프로그램 속도가 너무 빠르지 않으면 사용자는 너비를 볼 수 있습니다. 자동 실행이 발생하여 무슨 일이 일어나고 있는지 궁금합니다.중복 선택만 생성하는 경우 z 인덱스가 높은 항목 뒤에 숨기고 원본에서 숨겨진 중복에 on select listener를 적용합니다.
바닐라 제한으로 인해 스타일을 인라인으로 수행할 수 없는 경우 사용이 어려울 수 있지만 스크립트를 만들어 Child를 머리에 최적화할 수 있습니다.

고객이 이를 주장하는 이 문제에 부딪혔고, 그들은 맥과 아이폰을 사용하고 있었습니다.

저는 미디어 쿼리와 패딩 레프트에 대한 퍼센티지 패딩을 사용하게 되었습니다.이것이 만족스러운 해결책이었습니까?전혀 그렇지 않지만, 그 일은 제가 다음 단계로 넘어갈 수 있게 해주었습니다.

가장 쉬운 방법:패딩-왼쪽 사용

select{
   padding-left:2rem
}

저도 비슷한 문제가 있었습니다.제 해결책은 스타일 섹션에서 고정된 크기의 글꼴로 변경하는 것이었습니다.

option {
  font-family: Courier New;
  width: 12ch;
  font-size: 14pt
}

select {
  font-family: Courier New;
  width: 14ch;
  font-size: 14pt
}

본문에서는 표시된 옵션에 밑줄을 붙여 길이를 같게 했습니다.
중앙 디스플레이 양쪽에 밑줄을 사용한 것을 참고합니다.

<select onchange='O.src=this.options[this.selectedIndex].value' align="center">
  <option value="" align="center">___(none)___</option>
  <option value="https://www.247backgammon.org/" align="center">_Backgammon_</option>
  <option value="https://www.247klondike.com/klondikeSolitaire3card.php" align="center">__Klondike__</option>
  <option value="https://www.247minesweeper.com/" align="center">_Minesweeper</option>
  <option value="https://sudoku.com/" align="center">
    <p>___Soduku___</p>
  </option>
</select>

아직 100%는 아니지만 이 토막글을 사용할 수 있습니다!

text-align-last: center; // Chrome의 경우 text-align: center; // Firefox의 경우

지금은 Safari나 Edge에서 작동하지 않습니다!

옵션이 정적인 경우 선택 상자에서 변경 이벤트를 듣고 각 개별 항목에 대한 패딩을 추가할 수 있습니다.

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});

언급URL : https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box

'sourcecode' 카테고리의 다른 글

$parser.unshift ?이것은 어떻게 됩니까? (0)	2023.10.26
dbms_sql.open_cursor에서 ORA-29471을 해결하는 방법은? (0)	2023.10.26
캐치 문은 던져진 오류를 캐치하지 않습니다. (0)	2023.10.26
지시에 필요한 컨트롤러를 찾을 수 없음 (0)	2023.10.26
요소에서 속성을 Xml 속성으로 직렬화 (0)	2023.10.26

현재글선택란에 텍스트를 가운데로 넣을 수 있습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

WordPress, JSON, Python, C, vuejs2, php, Powershell, MySQL, oracle, Git, reactjs, mongoDB, vuex, MariaDB, JavaScript, Java, Ajax, Spring-Boot, angularjs, jquery,

Today :
Yesterday :

copyscript

선택란에 텍스트를 가운데로 넣을 수 있습니까?

선택란에 텍스트를 가운데로 넣을 수 있습니까?

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

선택란에 텍스트를 가운데로 넣을 수 있습니까?

선택란에 텍스트를 가운데로 넣을 수 있습니까?

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바