相关疑难解决方法(0)
如何将浮动元素居中？
我正在实施分页,它需要集中.问题是链接需要显示为块,因此需要浮动它们.但是,text-align: center;对他们不起作用.我可以通过给左边的包装div填充来实现它,但是每个页面都有不同的页面数,所以这不起作用.这是我的代码:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->为了得到这个想法,我想要的是:
推荐指数
解决办法
查看次数
如何将容器中的浮动中心放在中心位置
是否可以将浮动的div放在容器中,如果是这样的话？
例如,我有一个带有容器div的页面,其中包含许多可变大小(动态生成)的浮动(左)div.div会溢出到下一行,但它们永远不会在容器div中居中,而是用左边的方式.它看起来像这样:
----------------------------
- -
- +++ +++++ ++++ ++ -
- +++ +++++ ++++ ++ -
- -
- ++ ++++++ +++ + -
- ++ ++++++ +++ + -
- -
----------------------------
虽然我希望浮动的div在容器中居中,如下所示:
----------------------------
- -
- +++ +++++ ++++ ++ -
- +++ +++++ ++++ ++ -
- -
- ++ ++++++ +++ + -
- ++ ++++++ +++ + -
- -
----------------------------
谢谢,
DLiKS
推荐指数
解决办法
查看次数
证明父母留下的div
我有以下要求.
绿色父母宽度将根据设备宽度而变化.我需要所有的盒子都在父母的中心.
我已经尝试了以下的东西,但它没有帮助我.
试验1
Parent {text-align:center} box {display:inline-block}.
这导致了以下输出
试用2
Parent {text-align:center} box{float:left}.
这导致了以下输出
试验3
Parent {display:flex} box -> justify-around & justify-between也没有奏效.
.parent {
text-align: center;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}<div class="parent">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>任何有关这方面的帮助将不胜感激.
推荐指数
解决办法
查看次数
如何在标题div中水平居中两个div？
我有一个标题div固定在浏览器窗口的顶部100%宽度.在标题div中有一个带有标题文本的div,并且有一个带有水平列表的div.水平列表div应出现在标题文本div的右侧.
这是我的CSS和HTML:
#header {
position:fixed;
top:0;
left:0;
right:0;
background-color:#333333;
padding:20px;
}
#title {
float:left;
color:#000000;
font-size:30px;
margin-right:24px;
background-color:#ffffff;
padding:8px;
}
#navigation ul {
padding:0;
margin:0;
list-style-type:none;
}
#navigation ul li {
display:inline;
margin-right:20px;
padding:3px;
background-color:#ffffff;
}
#navigation ul li a {
color:#000000;
text-decoration:none;
}<div id="header">
<div id="title">Some Title Text</div>
<div id="navigation"><ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul></div>
</div>所以现在标题和导航div在标题div中保持对齐.如何将标题和导航div水平居中？
编辑:更喜欢不使用硬编码宽度的解决方案(例如width: 500px),因为列表大小并不总是相同.
推荐指数
解决办法
查看次数