我正在尝试创建一个在右侧具有图像的按钮。但是,当我将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 Demo
最佳答案
尝试这个:
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>
关于html - 创建具有固定大小但居中元素的Css按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26281267/