css-如何让你的元素居中？

来源：互联网发布：java集合框架中抽象类编辑：程序博客网时间：2024/05/01 17:42

（1）水平居中：
行内元素 text-align:center(父级元素设置文本居中)，例如
这里写图片描述
块状元素
定宽：margin:0 atuo;
不定宽：

        1.加一个<table>,为这个table加上margin:0 atuo;        2.改成行内元素 display:in-line;然后再text-align:center;        3.父元素 float：left，position：relative，left：50;          子元素 position：relative，left：-50%;

（2）垂直居中：
针对父元素是或,可用vertical-aglin:middle,
单行文本：line-height:指定像素；

（3）代码

<body> <div class="container-fluid" style="border: 1px solid red; margin-top: 10px;"> <div class="row bg-info"> <table class="table" style="border: 1px solid red; margin-top: 10px"> <tr> <td style="border: 1px solid red; width: 50%"><font class="col-sm-6" style="font-size: 30px; color: red;">生产数据远程管理系统</font> </td> <td class="col-sm-6 " style="border: 1px solid red;vertical-align: middle;"> <font style="border: 1px solid blue;" class="col-sm-3 text-center">时间显示</font> <font style="border: 1px solid blue;" class="col-sm-3 text-center">用户显示</font> <font style="border: 1px solid blue;" class="col-sm-3 text-center">改密显示</font> <font style="border: 1px solid blue;" class="col-sm-3 text-center">退出显示</font> </td> </tr> </table> </div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> </body>（4）显示
显示效果

阅读全文

0 0