欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS如何让DIV和table居中但是让其中的文字不居中
这篇文章主要为大家详细介绍了CSS如何让DIV和table居中但是让其中的文字不居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

我们在写网页代码的时候经常会遇到居中代码的书写,一般我们要实现<div><table>居中,都会使用<center></center>把它包起来,这样确实很方便的使<div><table>居中了,但是使得<div><table>里的文字内容页居中了,这个不符合我们的设计意愿。那么,我们能否用css实现div或table居中,文字不居中呢?答案是肯定的,本文将给你介绍如何实现此效果。如下图:

CSS如何让DIV和table居中但是让其中的文字不居中

css实现div或table居中 文字不居中

首先,介绍css的写法

.countainer{
margin:auto;
width:600px;
height:100px;
background-color:#cccccc;
}

这里我们要注意一个关键代码,就是 margin:auto; ,这个代码就是起到可以让div或table居中,而文字不居中的功效。

了解这个后,剩下的,就是html中div或table引用此类 .countainer 了,看看下面的实例。

div代码:

<div class="countainer">
div居中, 而里面的文字不居中
</div>

table代码:

<table class="countainer">
  <tr>
    <td>table居中, 而里面的文字不居中</td>
  </tr>
</table>

div或table使用类写法 class="countainer" ,代码并不复杂。

最后,361模板附上完整的html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>让div+css的div居中, 而里面的文字不居中的做法-www.ke361.com</title>
<style type="text/css">
.countainer{
  margin:auto;
  width:600px;
  height:100px;
  background-color:#cccccc;
}
</style>
</head>
<body>
<div class="countainer">
  div居中, 而里面的文字不居中
</div>
<br>
<table class="countainer">
  <tr>
    <td>table居中, 而里面的文字不居中</td>
  </tr>
</table>
</body>
</html>

最后做个小总结

margin:auto 可以让所有html元素居中

通过上述例子,看到 margin:auto 可以让div或table居中,其实,它可以让所有html元件居中,如:<p>、<pre>、<input>等元素。本代码通过Chrome/Firefox/IE测试,有需求的朋友可以直接使用。

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css DIV居中 table居中 文字不居中

上一篇PHP创建文件夹 PHP判断文件夹文件是否存在

下一篇js实现不同域名使用不同CSS样式代码

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在