css div将多行文本垂直和水平地与背景图像进行中心对齐

更新时间：2022-10-16 09:12:59

你有一些不必要的CSS，比如margin：-257px 0 0 -500px;左：50％; top：50％;宽度：1000px;身高：515px; $ c>在 .innie 上，这会抛弃您的中心对齐。

我认为这一点，你要做什么。

已更新

  .title {
 font-family：Book Antiqua，Palatino Linotype ，Palatino，serif; 
 font-size：400％; 
} 

 .subtitle {
 font-family：Book Antiqua，Palatino Linotype，Palatino，serif; 
 font-size：150％; 
} 

 .subnote {
 font-family：Book Antiqua，Palatino Linotype，Palatino，serif; 
 font-size：75％; 
} 

 .outer {
 display：table; 
位置：绝对; 
身高：100％; 
宽度：100％; 
 background：url（'https://placeimg.com/600/300/any'）no-repeat; 
 background-position：center; 
} 

 .middle {
 display：table-cell; 
 vertical-align：middle; 
} 

 .innie {
 text-align：center; 
}

jsFiddle演示 - https://jsfiddle.net/8dphnor5/

I have searched *** and cannot find a solution that works.

Seems that centring vertically AND horizontally in a div is hard.

I'm using this css:

.title {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 400%;
}

.subtitle {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 150%;
}

.subnote {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 75%;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.innie {
    width: 1000px;
    height: 515px;
    background-image: url("bkgrnd3.png");
    position:absolute;
    left:50%;
    top:50%;
    margin: -257px 0 0 -500px;
    text-align: center;
}

and this html:

<!DOCTYPE html>
<html>
    <head>
        <title>Timothy Eldon Official</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="eldon.css">
    </head>
    <body>
        <div class="outer">
            <div class="middle">
                <div class="innie">
                    <span class="title">
                        Timothy Eldon
                    </span>
                    <br/>
                    <span class="subtitle">
                        Author
                    </span>
                    <br/>
                    <span class="subnote">
                        (amateur)
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>

It centres everything on the page relatively, but I cannot get the text centred vertically.

There seems to be lots of ideas, but I've tried several and nothing works.

You have some unnecessary css such as margin: -257px 0 0 -500px; left:50%; top:50%; width: 1000px; height: 515px; on .innie , which is throwing off your center alignment.

I think this, what you are going for.

UPDATED

CSS

.title {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 400%;
}

.subtitle {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 150%;
}

.subnote {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
    font-size: 75%;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    background:url('https://placeimg.com/600/300/any')no-repeat;
    background-position: center;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.innie {
    text-align: center;
}

jsFiddle Demo - https://jsfiddle.net/8dphnor5/

上一篇 : ：div的垂直和水平对齐下一篇 : 将图像对齐到较小的div中心

css div将多行文本垂直和水平地与背景图像进行中心对齐

相关阅读

技术问答最新文章