mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-08 23:26:32 +02:00
79 lines
1.5 KiB
Plaintext
79 lines
1.5 KiB
Plaintext
---
|
|
category: Display
|
|
created: '2019-12-04'
|
|
description: Create an avatar component with CSS flexbox
|
|
keywords: css avatar, css flexbox
|
|
thumbnail: /assets/css-layout/thumbnails/avatar.png
|
|
title: Avatar
|
|
---
|
|
|
|
## HTML
|
|
|
|
```html index.html
|
|
<div class="avatar">
|
|
<!-- Avatar image -->
|
|
<img class="avatar__image" src="..." />
|
|
</div>
|
|
```
|
|
|
|
## CSS
|
|
|
|
```css styles.css
|
|
.avatar {
|
|
/* Rounded border */
|
|
border-radius: 50%;
|
|
|
|
/* Center the content */
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
/* Size */
|
|
height: 4rem;
|
|
width: 4rem;
|
|
}
|
|
|
|
.avatar__image {
|
|
/* Size */
|
|
height: 50%;
|
|
width: 50%;
|
|
}
|
|
```
|
|
|
|
<Playground>
|
|
```css styles.css hidden
|
|
body {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.avatar {
|
|
height: 4rem;
|
|
width: 4rem;
|
|
|
|
background-color: #d1d5db;
|
|
/* Rounded border */
|
|
border-radius: 50%;
|
|
|
|
/* Center the content */
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.avatar__image {
|
|
height: 50%;
|
|
width: 50%;
|
|
}
|
|
```
|
|
|
|
```html index.html hidden
|
|
<div class="avatar">
|
|
<div class="avatar__image">
|
|
<svg viewBox="0 0 24 24" fill="none" height="100%" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" width="100%">
|
|
<path d="M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z M5,20.5 c0-3.866,3.134-7,7-7s7,3.134,7,7H5z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
```
|
|
</Playground>
|