創建具有固定大小但居中元素的Css按鈕

Question

我正在嘗試創建一個右側帶有圖像的按鈕。 但是，當我將innerContainer的寬度設置為auto時，它將選擇最大寬度。

為了實現這一點，需要創建一些包裝器。

 div.container { max-width: 240px; width: auto; border: 5px solid #cd8102; border-radius: 3px; height: 36px; background: linear-gradient(#fcbf00, #f39600); /* Standard syntax */ font-family: 'PT Sans',sans-serif; color: black; font-size: 16px; text-decoration: none; } div.container:hover{ background: linear-gradient(yellow, #f39600); /* Standard syntax */ } div.innerContainer{ width: 90%; margin-left: auto; margin-right: auto; border: 2px solid black; } div.box1 { box-sizing: border-box; width: 207; max-width: 207px; /*border: 1px solid red; */ border: 1px solid yellow; float: left; height: 36px; text-align: center; padding-right: 6px; padding-left: 10px; } div.box2 { box-sizing: border-box; width: 20px; height: 20px; margin-top: 8px; text-align: center; border: 1px solid blue; float: left; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ } #TextInTheMiddle { text-align: center; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ height: 36px; border: 1px dotted red; } 

 <a href="http://www.google.de" > <div class="container"> <div class="innerContainer"> <div class="box1"> <span id='TextInTheMiddle'>Weiter Einkaufen</span> </div> <div class="box2"> <span> <img id="img" src="file:///Y|/Button/images/icons/next.png" height="20" width="20"> </span> </div> <div style="clear:both;"></div> </div> </div> </a> 

黑色邊框應在右側以藍色邊框結尾，並且也應在按鈕內居中。 我可以在js小提琴演示中查看。

Jsfiddle演示

Answer 1

嘗試這個：

div.container {   
  text-align: center;
}
div.innerContainer{
  display: inline-block;
  width: auto; /* default value */
}

 div.container { max-width: 240px; width: auto; border: 5px solid #cd8102; border-radius: 3px; height: 36px; background: linear-gradient(#fcbf00, #f39600); /* Standard syntax */ font-family: 'PT Sans',sans-serif; color: black; font-size: 16px; text-decoration: none; text-align: center; } div.container:hover{ background: linear-gradient(yellow, #f39600); /* Standard syntax */ } div.innerContainer{ display: inline-block; margin-left: auto; margin-right: auto; border: 2px solid black; } div.box1 { box-sizing: border-box; width: 207; max-width: 207px; /*border: 1px solid red; */ border: 1px solid yellow; float: left; height: 36px; text-align: center; padding-right: 6px; padding-left: 10px; } div.box2 { box-sizing: border-box; width: 20px; height: 20px; margin-top: 8px; text-align: center; border: 1px solid blue; float: left; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ } #TextInTheMiddle { text-align: center; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ height: 36px; border: 1px dotted red; } 

 <a href="http://www.google.de" > <div class="container"> <div class="innerContainer"> <div class="box1"> <span id='TextInTheMiddle'>Weiter Einkaufen</span> </div> <div class="box2"> <span> <img id="img" src="file:///Y|/Button/images/icons/next.png" height="20" width="20"> </span> </div> <div style="clear:both;"></div> </div> </div> </a> 

Answer 2

我猜這就是您要找的東西嗎？

http://jsfiddle.net/zf48u7as/1/

div.innerContainer{
    /* add this and remove width: */
    display: inline-block;
}

div.container {   
    /* add this: */
    text-align: center;
}

Answer 3

聽起來像您要把圖片放在盒子外面？ 這是我從中得到的：

div.innerContainer{

    margin: auto;
    border: 2px solid black;
    width: 270px;
}
div.box2 {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: 8px;
    text-align: center
    border: 1px solid blue;
    float: right;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */

}

更改width: 270px; 對於innerContainer和float: right; 對於box2 jsfiddle

Answer 4

您可以像這樣自定義按鈕，而不是放置div和span：

 input#button{ width: 75px; border: 0; border-radius: 4px; background-color: #838383; color: #fff; background-image: url('someImage'); background-repeat: no-repeat; background-position-x: 50px; text-indent: -20px; } 

 <input type="button" value="Click Me" id="button" /> 

Answer 5

看起來很多不必要的代碼。 我已盡可能減少它，以符合我認為您要實現的目標：

要實現此目的，沒有太多的事情要做：

• 通過相應的line-height和text-align將文本居中
• 將圖像作為背景圖像插入到父元素中並帶有適當的填充

為了進一步改進代碼，可以使用button元素（想要使用按鈕時適當的元素）和一些偽元素來放置圖像，但是這種解決方案也可以使用。

 div.container { display: inline-block; padding: 0 10px; border: 5px solid #cd8102; border-radius: 3px; height: 36px; background-image: linear-gradient(#fcbf00, #f39600); font-family: 'PT Sans', sans-serif; color: black; font-size: 16px; text-decoration: none; /* added for centering the text*/ text-align: center; line-height: 36px; } div.container:hover { background: linear-gradient(yellow, #f39600); } .container span { /* the image to the right of the text */ padding-right: 25px; background: url(http://lorempixel.com/output/sports-qc-20-20-6.jpg) right center no-repeat; } 

 <a href="http://www.google.de"> <div class="container"> <span> Weiter Einkaufen </span> </div> </a>