html 水平竖直居中

line-height:容器高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         /*
          white-space:  换行方式
            normal 正常换行
            nowrap 不换行
          */

         /*
        text-indent 首行缩进(em)
        line-height 行高  *****
        letter-spacing 字距
        word-spacing 词距
        */
         /*
       text-align 文本水平对齐方式
       left 默认值 向左对其
       right
       center   *****
       */
         /*
       text-transform 文本大小写
       none 默认值 无转换发生
       uppercase  转换成大写
       lowercase  转换成小写
       capitalize 将英文单词的首字母大写
       */
        p{
            width: 400px;
            background: aqua;
            /*white-space: nowrap;*/
            text-indent: 2em;
            line-height: 30px;
            /*letter-spacing: 5px;*/
            /*word-spacing: 20px;*/
            /*text-transform: uppercase;*/
            /*text-transform: lowercase;*/
            text-transform: capitalize;
        }
        div{
            width: 50px;
            height: 50px;
            background: antiquewhite;
            line-height: 50px;
            text-align: center;
            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
        }

         /*
       text-decoration 下划线 删除线 上划线
      ***** none  默认值,可以用这个属性去掉已经有下划线或者删除线或者上划线的样式
       underline  下划线,一般用于文章的重点表明
       overline   上划线
       line-through  删除线
       */
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>Python [1]  (英国发音:/?pa?θ?n/ 美国发音:/?pa?θɑ?n/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。</p>
    <div>1</div>
    <a href="#">55555</a>
</body>

text-align: center      水平居中

text-decoration:none  去掉划线

text-decoration:overline  上划线

text-decoration:underline  下划线

text-decoration:line-through  删除线

原文地址:https://www.cnblogs.com/cxhzy/p/10082253.html

时间: 2024-10-16 16:40:10

html 水平竖直居中的相关文章

Flex实现水平竖直居中布局

传统的布局使用的是“盒模型”加上display.position和float属性,但是对于一些特殊的布局实现例如居中却是比较麻烦,所以,为了解决一些复杂的布局问题,一种更为灵活的布局方式出现了,那就是Flex布局. Flex 即为Flexible Box,指的是“弹性布局”,它可以为盒模型提供更加灵活的布局方式,例如,用flex可以优雅地实现水平竖直居中的布局. 例如下面这个例子,我们想做的是让child元素在parent里面水平竖直居中: <!DOCTYPE html> <html l

css-元素水平、竖直居中

一.水平居中 1.文本图片水平居中 给父级元素设置text-align:center; 2.确定宽度的块级元素居中 设置自身margin-left:auto;margin-right:auto;别忘了设置自身宽度: 3.不确定宽度的块级元素的居中 (1)用table帮助实现不确定宽度块级元素居中 <table><tr><td>块级元素</td></tr></table> 设置table元素margin-left:auto;margin

常用布局,div竖直居中

常用两列布局,多列布局和div竖直居中 body { margin: 0; padding: 0; } .w200 { width: 200px; } .mar-left200 { margin-left: 200px; } .red { background-color: red; } .middle { vertical-align: middle; } .block { width: 80%; height: 300px; border: 1px solid #eee; margin: 0

css水平居中,竖直居中技巧(二)

css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-C

竖直居中方式总结

已知有 html, body { margin: 0; height: 100%; } #child { width: 200px; height: 200px; background: black; } <div id="child"></div> 将元素 #child 竖直居中于窗口中部 绝对定位法 1 对未知高度的元素适用.jsfiddle #child { position: absolute; /* fixed */ top: 50%; transfo

CSS.对其(左/右/居中对齐,水平/竖直)

1.<td/> <td align="right">SVG文件名:</td> 2.<input/> <input id="svgFileName01" type="input" value="112_z" style="border:none; text-align: right; "/> 3. 4. 5. 原文地址:https://www.cnb

UITextField竖直居中对齐

http://blog.sina.com.cn/s/blog_87533a0801012nv0.html 用xib生成的UITextField文字默认是水平左对齐,垂直居中对齐的,但是用代码生成的UITextField确是默认是水平左对齐,垂直顶对齐.到UITextField的头文件看了一下,发现只有设置水平对齐的属性,却没有垂直对齐属性.因为xib里都可以设垂直对齐属性,所以应有的,于是再到其父类中找,终于在UIControl.h中找到了,下面两个属性就是分别控制水平与垂直方向对齐的. @pr

CSS 行高与文字竖直居中

1.

Unity 2D游戏相机控制(水平,竖直,角色居中三种模式)

做2D游戏的时候,无非有三种模式,一种是只有竖直向上,一种是只有水平方向,一种是有水平又有竖直方向,我最近做游戏多关卡模式,不同模式就有着不一样的相机控制,按照平时的写法,也许有很多人就一下子写了三个相机脚本,现在我用了一个枚举类型来控制三个不一样的相机,贴代码: /// <summary> ///CameraCtrl ///Created by Wang YuTing /// </summary> using UnityEngine; using System.Collectio