[英]CSS: center elements inside <div> side by side
我一直在努力整夜把这些元素集中在一起,而不是把它们叠在一起:
我已经尝试将它们漂浮在左边它可以工作,但是,无论我做什么,它们都会坚持左侧。
HTML:
<div class="center pages clearfix">
<buuton class="center page-number">1</buuton>
<buuton class="center page-number">2</buuton>
<buuton class="center page-number">3</buuton>
</div>
CSS:
.center {
margin-left: auto;
margin-right: auto;
}
.page-number {
display: block;
float: none;
width: 28px;
height: auto;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.47);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
font-weight: 400;
line-height: 1.5;
text-align: center;
color: rgba(255, 255, 255, 0.47);
}
只需将“ display:block
”更新为“ display:inline-block
”,如下面更新的css
更新了css
.center {margin-left:auto; margin-right:auto; 文本对齐:中心; }
.page-number {
display: inline-block;
float: none;
width: 28px;
height: auto;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.47);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
font-weight: 400;
line-height: 1.5;
text-align: center;
color: rgba(255, 255, 255, 0.47);
}
试试这个: https : //jsfiddle.net/uo23L4n4/
使用内联块而不是块按钮。
使用text-align:center
<button class=" page-number">1</button>
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.page-number {
display: inline-block;
float: none;
width: 28px;
height: auto;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.47);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
font-weight: 400;
line-height: 1.5;
text-align: center;
color: rgba(255, 255, 255, 0.47);
}
将标记更改为列表,使其非常容易。
<ul class="center pages clearfix">
<li><buuton class="center page-number">1</buuton></li>
<li><buuton class="center page-number">2</buuton></li>
<li><buuton class="center page-number">3</buuton></li>
</ul>
使用此CSS
ul{
list-style:none;
}
li{
display:inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.