div居中 div水平居中代码

好消息:打开支付宝搜索“527385876”领取红包,最高1212元,每天可领

在设计网页的时候,经常需要居中,比如我设计了一张图片,我需要放图片中间,如果单纯用代码调用,这个图片肯定是接着图片的,那么如何居中呢?下面我们演示代码。

 

有很多种办法,我们一种一种谈。

第一种使用DIV布局,也就是用CSS代码来居中,我们可以看下面代码。

.main{ text-align: center; /*这里设置居中文字或者更换为图片代码*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

 

这段代码,是让里面的文字居中或者图片居中,我们需要设置CSS也就是这段文字居中的具体数值,通过TOP LEFE等来设置,目前来看设置的是border-radius: 20px; width: 300px; height: 350px;

第二种办法:设置图片居中。

Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中)。

如果图片在div中下的span属性中,必须转换成display:block;然后padding-top:10px。

 

第三者直接把代码加入到你的代码里。

 

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="img/baidu_jgylds3.gif" style="margin: 0 auto;" />
</div>

上面这段代码来看,是调用了一张图片。,默认已经设置好了居中代码,咱们只需要在你的需要居中的文档前加入
<div style="text-align: center; width: 500px; border: green solid 1px;">
然后在到你需要居中的文字或者图片后加入
</div>即可,这种方式比较简单适合所有人。

其实不管任何方式的居中,你都需要在代码里直接用代码实现,或者调用CSS实现,所以,你可以在网上寻找居中代码,在你代码2头加入你需要居中的代码即可,这个不行换一个,一般都可以实现。

 

更多
  • 该日志由 于2018年08月11日发表在 未分类 分类下, 你可以发表评论,并在保留原文地址 及作者的情况下引用到你的网站或博客。
  • 本文链接: div居中 div水平居中代码 | 帮助信息-动天数据
  • 版权所有: 帮助信息-动天数据-转载请标明出处
  • 【上一篇】 【下一篇】

    0 Comments.