WordPress主题结构开发中div+css水平居中的解决方法
摘要:大挖在进行wordpress主题仿站开发中,遇到最多的结构div问题就是水平居中的总是,下面大挖给大家举…
摘要:大挖在进行wordpress主题仿站开发中,遇到最多的结构div问题就是水平居中的总是,下面大挖给大家举例一些常见的cs…
大挖在进行wordpress主题仿站开发中,遇到最多的结构div问题就是水平居中的总是,下面大挖给大家举例一些常见的css居中属于及场景供大家解决各自己的开发问题。
文本、图片等内容元素的水平居中
作为内容元素居中的解决方法,我们只需要给父元素div设置text-align:center;即可实现。
| 
 1 
2 
3 
 | 
 
<div class=”top”>
 
   <span>wordpress挖主题</span>
 
</div>
 
 | 
如果我们想要实现“wordpress挖主题”的文字内容居中,只需在样式中写.top{text-align:certer;}
固定宽度的div设置的水平居中
如果是固定宽度,需要设置marin属性,为margin:0 auto;
| 
 1 
 | 
 
<div class=”top”>内容</div> 
 
 | 
实现div块的水平居中,且宽度固定为60px,需在样式中写
.top{width:60px; margin:0 auto;}
非固定宽度的块级元素的水平居中方法
部分div尺寸并不是固定的,而是变化的,有以下两种情况,我们分别进行介绍
一、把需要居中的块元素定义为display:table,之后用margin来实现居中了。
| 
 1 
2 
3 
4 
5 
6 
7 
 | 
 
<div class=”footer>
 
  <ul>
 
     <li>内容1</li> 
 
<li>内容2</li>
 
<li>内容3</li>
 
</ul>
 
</div>
 
 | 
li的数量不确定,因此ul的宽度不能固定,实现居中,需要在样式中这样写
.footer ul{display:table;margin:0 auto;}
二、将块元素转换为行内元素
在样式中写入.footer ul{display:inline;text-align:center;}
此时,li也应作出变化 .footer ul li{display:inline;}
类别:WordPress教程、 
		本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

还没有任何评论,赶紧来占个楼吧!