首页 > 编程知识 正文

如何设置数据水平居中对齐,计算机水平居中在哪里

时间:2023-05-03 20:54:41 阅读:163998 作者:4453

html代码:

body div class='txtCenter '希望水平显示在父容器的中央。 /div/body css代码:

syle.txt center { text-align : center; }/style固定宽度块元素html代码:

body div我是一个很宽的方块元素。 哈哈,显示在水平中央。 /div/body css代码:

style div { border :1 pxsolidred; /*为了显示对中效果,在div上设置了挡板*/width:200px; /*定宽*/margin:20px auto; 将/* margin-left和margin-right设置为auto */}/style也可以写:

边距左边缘:自动; 边距-右:自动; 注:您可以自由设置要素的上下边距。

广度决定箱子的水平中央

效果如下。

位于宽不确定等级中央的div class='box' div class='box1'慕课网络慕课网络慕课网络慕课网络慕课网络慕课网络慕课网络慕课网络慕课网络慕课

. box { border: 1px solid #00ee00; height: 300px; 定位:关系; } .box1 { border: 1px solid red; 定位:助手; top: 50%; left: 50%; transform:translate(-50%、-50%; }效果如下。

技术点的解释:

1、利用父要素设定相对位置,将子要素设定为绝对位置时,子要素是相对于父要素设定位置的特性。

2、子元素设置上和左偏移值均为50%。

3、之后,使用css3属性的translate移位,向上和向左都赋予-50%的距离,可以得到垂直水平中央的效果。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。