Question

我需要帮助svg渐变的顶级中心标题，我已经在这里的所有帖子中看起来没有任何帮助我。我想要的是标题将位于中心页面的顶部尝试添加display：block to it然后margin：auto仍然没有。

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Page Title</title>
</head>

    <body>


        <div class="contain">
            <svg width="750px" height="300px" fill="url(#Gradient-1)">
                <defs>
                    <linearGradient id="Gradient-1" x2="0%" y2="100%">

                        <stop offset="10%" stop-color="#b4c63b" />
                        <stop offset="20%" stop-color="#ef5b2b" />
                        <stop offset="30%" stop-color="#ab6294" />
                        <stop offset="40%" stop-color="#b4c63b" />
                        <stop offset="50%" stop-color="#ef5b2b" />
                        <stop offset="60%" stop-color="#1cb98f" />
                        <stop offset="70%" stop-color="#b4c63b" />
                        <stop offset="80%" stop-color="#ef5b2b" />
                        <stop offset="90%" stop-color="#1cb98f" />
                        <stop offset="100%" stop-color="#48afc1" />
                    </linearGradient>
                </defs>
                <text x="15%" y="75%">Project</text>
            </svg>
        </div>

        <footer>

          blablablablablabla

        </footer>

    </body>

</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Signika);



body {
    background: #f3f3f3;
}

.contatin {
    display: block;
    margin: auto;
}

text {
    font-size: 100px;
    font-weight: bold;
    font-family: 'Signika', sans-serif;
}

footer {
    width: 100%;
    background-color: gray;
    font-size: 19px;
    bottom: 0;
    left: 0;
    position: fixed;
    display: block;

}

中心Svg svg将文本标题渐变为中心

0 个答案: