Question

我有一个非常简单的html网页，在该网页上显示两个按钮，其内容为文本图片。这些按钮具有白色背景和金色轮廓。但是，它们现在具有从每个按钮右侧突出的黑条。

我发现能够移动它们的唯一方法是运行

<button class="button button2" style="vertical-align:middle"><a href=""><img class="chatbutton" src="img/chatbutton.png" />

如果条位于按钮右下角或按钮中间，则vertical-align属性会更改。我的代码是：

    .button {
          border-radius: 12px;
          background: white;
          border: 4px solid #FFD500;
          text-align: center;
          padding: 20px;
          margin: auto;
          overflow: hidden;
        }

        .button:hover {
    	   background: #FFD500;
    	   outline: medium none;
        }

       .button1 {
    	  width: 150px;
    	  height: 75px;
        }

        .outer {
         display: table;
         position: absolute;
         height: 100%;
         width: 100%;
        }

        .middle {
          display: table-cell;
          vertical-align: middle;
        }

        .main {
    	   background-color: white;
    	   background: white;
    	   width: 95%;
    	   margin: 0 auto;
    	   text-align: center;
    	   margin-top: 20px;
    	   padding-top: 40px;
    	   padding-bottom: 20px;
    	   border: 2px solid #494A4A;
      	   border-radius: 25px;
    	   margin-left: auto;
      	   margin-right: auto;
         }

        @media screen and (min-width: 480px){
    	   .main {
    		background-color: white;
    		width: 50%;
    		margin: 0 auto;
    		text-align: center;
    		margin-top: 20px;
    		padding-top: 40px;
    		padding-bottom: 20px;
    		border: 2px solid #494A4A;
    	  	border-radius: 25px;
    		margin-left: auto;
    	  	margin-right: auto;
    	   }
        }

    <body style="background-color:#494A4A">
    	 <div class="outer">
      		<div class="middle">

    			<div class="main">
    					<button class="button button1" ><a href=""><img 
         class="filebutton" src="" /></button>
    				</div>
    			</div>
    		</div>
        </body>

Answer 1

img { border-radius: 60px; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); width: 284px; height: 108px; object-fit: none; object-position: 50% 20%; } // object position can be adjusted to fit your liking

<body>
<a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsuLEXVtGfxNCEOgIKdeIT4ki9LK3JwiGAs0YtuAXJHay8WZhw"></a>
</body>

我实际上会将图像本身设置为按钮，而不是使用button标签。但是您也可以使用button标记并设置其样式。

HTML按钮上的格式奇怪

1 个答案: