创建具有固定大小但居中的元素的Css按钮

Question

我试图在右侧创建一个带有图像的按钮。但是当我将innerContainer的宽度设置为auto时，它会选择最大宽度。

要实现这一点，需要创建一些包装器。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

黑色边框应以右侧的蓝色边框结束，并在按钮内居中。我可以在js小提琴演示中观看。

Jsfiddle Demo

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;的{​​{1}}和innerContainer的{​​{1}} jsfiddle

Answer 4

您可以自定义按钮，而不是放置div和span：

＆＃13;

＆＃13;

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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

这看起来像是一堆不必要的代码。我尽可能地减少它以匹配我认为你想要实现的目标：

要做到这一点，没有太多事情要做：

• 通过相应的line-height和text-align
将文字居中
• 将图像作为背景图像插入，并使用适当的填充到父元素

为了进一步改进您的代码，您可以使用按钮元素（当您想要按钮时使用相应的元素）和一些用于定位图像的伪元素，但此解决方案也可以。

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-q-c-20-20-6.jpg) right center no-repeat;
}

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