A
Develop a simple webpage where a circle with a solid background color is horizontally centered, containing a single letter that is centered both horizontally and vertically inside the circle.
Requirements
- Circle Design: Use HTML and CSS to create a circular shape.
- Horizontal Centering of Circle: The circle should be centered horizontally on the webpage.
- Letter Positioning Inside Circle: Place a single letter (e.g., ‘A’) inside the circle. This letter should be centered both horizontally and vertically within the circle.
- Circle Styling: Choose a distinct background color for the circle, and style the letter to be clearly visible against this background.
HTML Structure
- Utilize a
<div>element to create the circle. - Insert a
<span>or<p>element within the<div>for the letter.
CSS Guidelines
- Ensure the width and height of the circle are equal to form a perfect circle, and use
border-radiusto round it. - To center the letter inside the circle, use CSS
line-heightandtext-alignto center the letter vertically and horizontally within the circle. - Apply
margin: 0 auto;to the circle’s container to achieve horizontal centering on the page.
Deliverable
- A static HTML page that shows the horizontally centered circle with the vertically and horizontally centered letter.
This task is aimed at enhancing your skills in CSS positioning, particularly in centering elements. It’s a fundamental skill in web design, crucial for creating balanced and visually appealing layouts.