元素和内容居中

2022-08-02 23:02:32 阅读：143 来源： 互联网

元素和内容的居中方法

元素 : <标签名>内容</标签名>

标签 : <标签名>

内容 : xxx

代码

 <style>
      .main {
        text-align: center;
      }
      /* marign */
      .container {
        width: 300px;
        height: 100px;
        
        margin: 0 auto;
      }
      .head {
        width: 400px;
        height: 50px;
        
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 
      一:
      text-align(文本，行内元素，行内块元素)
      如果要让以上内容实现居中，给他们的父元素(块)设置  text-align属性
    -->
    <div class="main">hello world</div>
    <div class="main">
      <span>span标记</span>
    </div>
    <div class="main">
      <img src="./img/logo.png" width="100" alt="" />
    </div>
    <div class="main">
      <input type="text" />
    </div>

    <hr />
    <!-- --------------------------------------------------- -->
    <!-- margin:0 auto
     二：块元素水平居中，直接给当前元素设置属性
    -->
    <div class="container"></div>

    <!-- 三：垂直居中 
    line-height  单行文本 -->
    <div class="head">我是头部页面</div>


还有后面所学的flex盒子、vertical-align方法

标签：居中,--,text,align,元素,height,内容
来源： https://www.cnblogs.com/YBYZ/p/16545487.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

元素和内容居中

元素和内容的居中方法