html - Center Svg svg gradients text title to center -
i need top center title in svg gradient,i in posts here , nothing me. want title @ top of page in center try add display: block , margin: auto , still nothing.
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;
}
Comments
Post a Comment