- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Align HTML5 SVG to the center of the screen
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.
Example
Let us see an example of SVG −
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
</body>
</html>To center it, add the CSS like the following −
# svgelem {
margin-left:auto;
margin-right:auto;
display:block;
}
Updated on 25-Jun-2020 07:07:41
- Related Questions & Answers
- Positioning HTML5 SVG in the center of screen
- Align flex items in the center on different screen sizes in Bootstrap
- Align flex items at the center of the container with CSS
- How to center align the items of a JComboBox in Java?
- How to align views at the bottom of the screen in iOS
- How to align views at the bottom of the screen in Android?
- How to center a div on the screen using jQuery?
- How to center a window on the screen in Tkinter?
- Align single rows of items in the center with Bootstrap 4
- Align gathered items in the center in Bootstrap 4
- How to display a JFrame to the center of a screen in Java?
- What is the difference between SVG and HTML5 Canvas?
- Usage of CSS align-content property center value
- Usage of CSS align-items property center value
- Align a flex item in the center with Bootstrap 4
Advertisements