[英]css center middle element in div for multiple screen sizes
<div class="add_nav_header">
<div class="centerButtons">
<a class="btnLogout smallBtn" data-role="button"></a>
<a class="btnSearch smallBtn" data-role="button"></a>
<a class="btnViewList smallBtn" data-role="button"></a>
</div>
</div>
.centerButtons {
width: 50%;
margin: 0 auto;
}
.add_nav_header {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: .5em;
}
.smallBtn {
float: right;
margin: .3em;
padding: .6em;
font-size: .9em;
}
.btnLogout {
float: right;
}
.btnViewList {
float: left;
}
.btnSearch {
left: -33%;
}
This is my html and css and I want to center the middle btnSearch button but I don't want to have to set the left percentage for every screen size with media queries. 这是我的html和CSS,我想将btnSearch中间的按钮居中,但我不想为每个带有媒体查询的屏幕尺寸设置左百分比。
You could use text-align: center
to the container and remove float
from div you want to be centered. 您可以使用
text-align: center
放置容器,并从要居中的div中删除float
。
.centerButtons {
width: 50%;
margin: 0 auto;
text-align: center;
}
.add_nav_header {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: .5em;
}
.smallBtn {
/* float: right; */
margin: .3em;
padding: .6em;
font-size: .9em;
display: inline-block;
}
.btnLogout {
float: left;
}
.btnViewList {
float: right;
}
/* .btnSearch {
left: -33%;
} */
Fiddle: http://jsfiddle.net/zfh1ono0/ 小提琴: http : //jsfiddle.net/zfh1ono0/
I'm not sure if I fully understand your question, but this link might help you: CSS centering . 我不确定我是否完全理解您的问题,但是此链接可能会帮助您: CSS centering 。 The key is this line:
关键是这一行:
transform: translate(-50%, -50%);
转换:translate(-50%,-50%);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.