图片和多行文本水平垂直居中

1,多行文本水平垂直居中:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文本水平居中title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            line-height: 300px;
            background-color: #ccc;
        }
        .box .text{
            line-height: normal;
            display: inline-block;
            vertical-align: middle;
            text-align: left;
        }
    style>
head>
<body>
    <div class="box"><p class="text">多啊好股难闻文本水平居中时间到了科技服务暑假里看见了我空间里看见 就渴望交流空间发谁都放假了我就哦额就 尽快了解的实力考几分离开我立刻将法律框架看来p>div>
body>
html>

2,图片水平垂直居中:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文本水平居中title>
    <style>
       .box{
           line-height: 300px;
           text-align: center;
       }
        .box>img{
            vertical-align: middle;
        }
    style>
head>
<body>
    <div class="box"><img src="" alt=""/>div>
body>
html>


你可能感兴趣的:(图片和多行文本水平垂直居中)