Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andriikot/html-elements-centering

HTML Elements Centering
https://github.com/andriikot/html-elements-centering

Last synced: about 2 months ago
JSON representation

HTML Elements Centering

Host: GitHub
URL: https://github.com/andriikot/html-elements-centering
Owner: AndriiKot
Created: 2023-03-27T20:17:36.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-03-28T09:54:14.000Z (over 1 year ago)
Last Synced: 2024-01-09T00:30:30.008Z (12 months ago)
Language: HTML
Size: 9.77 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# HTML-elements-centering
HTML Elements Centering

```html

HTML elements centering

Example 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis minima eligendi laudantium quas voluptatibus porro distinctio quam nemo in vero. Eaque sunt excepturi cum inventore doloribus. At voluptates vitae et?
Consectetur voluptas esse eligendi quasi sed doloremque quisquam expedita blanditiis officia laboriosam dignissimos nemo facere laborum dolores alias neque consequatur assumenda, dolorem molestiae rerum temporibus? Quas quis blanditiis dolorem laboriosam.

```
```css
/* Example 1 */
.text{
text-align: center
}
```

____
____
```html

Example 2

Link

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur iste eveniet deserunt iusto et! Asperiores nam nobis id velit a. Odit eius voluptate doloremque. Nobis provident consequatur adipisci reiciendis quidem?
Nostrum nam itaque explicabo hic? Nulla aliquid est similique repellendus minus dolor quasi ducimus perspiciatis quod illo praesentium exercitationem, repudiandae quidem culpa maxime eveniet nam, totam nihil eligendi ullam possimus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis harum dicta fugiat explicabo ipsum veritatis, incidunt quidem optio perspiciatis repudiandae enim dolor culpa id, tempore facere facilis sit mollitia nam?
Fuga atque beatae perspiciatis odit et maxime amet inventore voluptatum, sint, dignissimos rem officiis assumenda nam corrupti quos veritatis voluptates! Saepe praesentium officia blanditiis fuga minima nemo dignissimos rerum dolore.
Tempore nisi, ea similique voluptate nostrum excepturi? Ducimus natus repudiandae dolorem eos dicta nam est amet, itaque saepe sapiente dolor delectus odio fugiat autem pariatur impedit. Numquam dignissimos odio commodi!

```
```css
/* Example 2 */
.wrapper{
margin-top: 30px;
text-align: center
}
```

____
____

```html

Example 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto,
adipisci nesciunt. Natus nam, deserunt doloremque assumenda itaque
suscipit atque alias explicabo maiores rem beatae facere in enim ad pariatur accusantium!

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cumque distinctio rem enim fugit velit dicta adipisci recusandae, quas nisi corporis,
asperiores beatae laboriosam fuga, eum fugiat amet possimus vero at?

```
```css
/* Example 3 */
.image{
display: block;
margin: 0 auto
}
```

____
____

```html

Example 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga accusantium, optio, natus debitis dolores culpa voluptatem tenetur voluptates animi rerum aliquam labore repudiandae ab eveniet alias similique repellendus fugiat laborum!
Dolorum mollitia illum sit expedita eius, incidunt quam minima quos explicabo voluptas suscipit provident est. Dolore eius distinctio qui, eligendi cumque omnis, sequi nostrum totam cum molestias doloribus saepe delectus!

Кнопка

```
```css
/* Example 4 */
.button {
position: relative;
left: 50%;
transform: translateX(-50%)
}
```

____
____

```html

Example 5

Lorem, ipsum dolor.

```

```css
/* Example 5 */
.block{
width: 300px;
height: 100px;
background-color: aqua;
margin-top: 10px;
text-align: center;
font-size: 25px;
padding: 30px;
border-radius: 8px
}

.flex{
display: flex;
justify-content: center
}

```

____
____

```html

Example 6

Lorem, ipsum dolor.

```
```css
/* Example 6 */
.block{
width: 300px;
height: 100px;
background-color: aqua;
margin-top: 10px;
text-align: center;
font-size: 25px;
padding: 30px;
border-radius: 8px
}

.grid{
display: grid;
justify-content: center
}
```

____
____

```html

Example 7

Lorem ipsum dolor sit.

```
```css
.box{
position: relative;
background-color: black;

max-width: 400px;
height: 250px
}

.box .image {
display: block;
width: 100%;
height: 100%
}

.box .text{
position: absolute;
left: 50%;
transform: translateX(-50%);

top: 0;
color: white;
font-size: 21px
}
```