>

아래 CSS를 사용하고 있지만 버튼 중앙에 이미지를 넣습니다. <input type="button"> 를 사용하여 아이콘을 왼쪽 또는 오른쪽으로 정렬하는 방법 텍스트와 이미지가 잘 맞고 잘 정렬되도록 하시겠습니까?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

  • 답변 # 1

    input 를 반드시 사용해야하는 경우 , 이것을 시도하십시오 :

    background-image: url(...);
    background-repeat: no-repeat;
    background-position: <left|right>;
    padding-<left|right>: <width of image>px;
    
    

    일반적으로 button 를 사용하는 것이 조금 더 쉽습니다   img 와 함께  내부 :

    <button type="submit"><img> Text</button>
    
    

    그러나 pyzwyz의 브라우저 구현  제출이 일치하지 않으며 button 에서 모든 버튼 값이 전송된다는 사실  다중 제출 양식에서 "버튼 클릭"감지를 종료합니다.

  • 답변 # 2

    버튼 이미지가 16 x 16 픽셀이라고 가정하면 원하는 작업을 수행해야합니다.

    button
    
    

    <input type="button" value="Add a new row" class="button-add" />
    
    

    예제 버튼 :

    업데이트

    Low를 사용하면이 믹스 인이 유용 할 수 있습니다.

    input.button-add {
        background-image: url(/images/buttons/add.png); /* 16px x 16px */
        background-color: transparent; /* make the button transparent */
        background-repeat: no-repeat;  /* make the background image appear only once */
        background-position: 0px 0px;  /* equivalent to 'top left' */
        border: none;           /* assuming we don't want any borders */
        cursor: pointer;        /* make the cursor like hovering over an <a> element */
        height: 16px;           /* make this the size of your image */
        padding-left: 16px;     /* make text start to the right of the image */
        vertical-align: middle; /* align the text vertically centered */
    }
    
    

    위의 내용으로 컴파일

    .icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
        height: @icon-size * 2;
        padding-left: @icon-size + @icon-inset * 2;
        padding-right: @icon-inset;
        border: 1px solid @border-color;
        background: @background-color url(@icon-url) no-repeat @icon-inset center;
        cursor: pointer;
    }
    input.button-add {
        .icon-button("http://placehold.it/16x16", @background-color: #ff9900);
    }
    
    

    JSFiddle

  • 답변 # 3

    input.button-add {
      height: 32px;
      padding-left: 36px;
      padding-right: 10px;
      border: 1px solid #000000;
      background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
      cursor: pointer;
    }
    
    

    이것이 도움이 되길 바랍니다.

  • 답변 # 4

    스프라이트 시트를 사용하는 경우 불가능하며 요소를 줄 바꿈해야합니다.

    <button type="submit" style="background-color:transparent; border-color:transparent;"> 
      <img src="images/button/masuk.png" height="35"/>
    </button>
    <button type="reset" style="background-color:transparent; border-color:transparent;"> 
      <img src="images/button/reset.png" height="35"/>
    </button>
    
    

    이 바이올린을 확인하십시오 : http://jsfiddle.net/AJNnZ/

  • 답변 # 5

    이 트릭을 시도해보십시오!

    1) 다음과 같이하십시오 :

    .btn{
        display: inline-block;
        background: blue;
        position: relative;
        border-radius: 5px;
    }
    .input, .btn:after{
        color: #fff;
    }
    .btn:after{
        position: absolute;
        content: '@';
        right: 0;
        width: 1.3em;
        height: 1em;
    }
    .input{
        background: transparent;
        color: #fff;
        border: 0;
        padding-right: 20px;
        cursor: pointer;
        position: relative;
        padding: 5px 20px 5px 5px;
        z-index: 1;
    }
    
    

    두 번째) 스타일!

    <label for="img">
       <input type="submit" name="submit" id="img" value="img-btn">
       <img src="yourimage.jpg" id="img">
    </label>
    
    

    깨끗하지는 않지만 일을 할 것입니다!

    <style type="text/css"> img:hover { cursor: pointer; } input[type=submit] { display: none; } </style>

  • 이전 rabbitmq 소비자 모니터링
  • 다음 python - Google Colab에서 스크립트 셸을 실행하는 방법은 무엇입니까?