chore(docs): refactor README.md

[Marukome0743]

Summary

Remove redundant html element and css.
Add alt text to images.
Both old and new README.md have the same appearance.

Description

I changed some parts.

1. Insert align="center" into only top <div> tag

The all of logo, title, and badges are center.
Then it doesn't need to call at every element.

2. Move <h1> tag outside <a> tag

The title doesn't have link even if inside <a> tag when it's wrapped heading element.
So put it out for the readability.

3. Use image alt text instead of aria-label

Alt text is displayed on the page if the images can't be loaded.
That's why I prefer alt text to aria-label.
In addition, the screen reader still reads the same words after updating.

Improving Documentation

• Run pnpm prettier-fix to fix formatting issues before opening the PR.
• Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide

x-ref: <img>: The Image Embed element | mdn web docs

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: 2063149

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[ijjk]

It looks like this doesn't apply as expected.

[Marukome0743]

It looks like this doesn't apply as expected.

As you say, GitHub Display the rich diff shows left align items.
However, the output result is correctly center align because align="center" parse text-align: -webkit-center css.

I'm not sure why GitHub rich diff shows different preview.
But text-align: -webkit-center affects the every child elements.

[ijjk]

Ah yea looks like a quirk of the diff view, seems fine in full view