水平竖直居中方式选择

最新推荐文章于 2024-02-03 14:49:25 发布

剽悍六杯茶

最新推荐文章于 2024-02-03 14:49:25 发布

阅读量404

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/nikita1995/article/details/52071313

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8;">
    <title>水平竖直居中方式选择</title>
        <style type="text/css">
        .body{
            padding-left:0;
            padding-right:0;
        }
        /*设置宽高*/
        .center1{
            width:300px;
            margin-left:auto;
            margin-right:auto;
        }
        /*使用position属性进行水平对齐*/
        .center2
        {
        position:relative;
        left:35%;
        }

        /*随浏览器窗口大小而改变的具有弹性的居中布局*/
         .center3 {
             padding:10px 350px;
              }

        /*使用float属性水平对齐*/
        .center4{
            float:right;
            width:300px;
        }

        /*单行竖直居中*/
        .text1{
            height: 4em;
            line-height: 4em;
            overflow: hidden;
        }

        /*多行竖直居中*/
        .text2{
            padding-bottom:10px; 
            padding-top:10px;
        }

        /*控制图片和文字在同一行显示且对齐的3种方法*/
        #denglu { 
            vertical-align:middle;  
            font-size:14px; 
            } 
            /*设置为背景图片或者都使用div对齐*/
        #denglu1 { 
            background:url(login.gif) no-repeat left center; 
            } 
        #zhaohuimima1{ 
            font-size:14px; 
            padding-left:50px;
            } 
        </style>
</head>
<body>
    <div class="center1">
        <img src="./image/logo.png"/>
    </div>
    <div class="center2">
        <img class="right" src="./image/logo.png"/>
    </div>
    <div class="center3">
        <img class="right" src="./image/logo.png"/>
    </div>
    <div class="center4">
        <img class="right" src="./image/logo.png"/>
    </div>
    <div class="text1">
        <p>haklhfsjhdflakjhlkajshdlkjhgakljshdflkah</p>
    </div>
    <div class="text2">
        <p>haklhfsjhdflakjhlkajshdlkjhgakljshdflkahsfalkhdfkjhdflaksjdhgalksjdfksdjhflksdjhfalks</p>
    </div>
    <div id="denglu"> 
        <img src="reg.gif"> 
        <img src="login.gif"> 
        <a href="#">找回密码</a> 
    </div> 
    <div id="denglu1"> 
        <div id="zhaohuimima1"><a href="#">找回密码</a></div> 
    </div> 
    </body>
</body>
</html>

剽悍六杯茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平竖直居中方式选择

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8;"> <title>水平竖直居中方式选择</title> <style type="text/css"> .body{ padding-le
复制链接

扫一扫

专栏目录