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

Question

I'm trying to create a Button with an Image on the Right side. But when I set the width of my innerContainer to auto it choses the maximum width.

To realize this, there was a need to create some wrappers.

 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> 

The black border should ending with the blue one on the right side and also be centered within the button. I can be viewed in the js fiddle Demo.

Jsfiddle Demo

Answer 1

Try this:

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

I'm guessing that's what you were looking for?

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

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

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

Answer 3

Sounds like you want the picture outside of the box? This is what I got from it:

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

}

Changed the width: 270px; for the innerContainer and float: right; for the box2 jsfiddle

Answer 4

Instead of putting divs and spans you can customize the button like this :

 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

That looks like an aweful lot of unnecessary code. I've reduced it as much as possible to match what I thought you were trying to achieve:

To achieve this, there is not much to do:

• center the text via an according line-height and text-align
• insert the image as background image with an appropriate padding to the parent element

To further improve your code, you could use a button element (the appropriate element when you want to have a button) and some pseudo elements to position your image, but this solution works as well.

 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>