O princípio para alinhar elementos e um pouco do pseudo-class `:has`

Situação: temos uma img que é `display:inline` dentro de uma div: `display: block`, como podemos centralizar ?

A só chamar:

div{ text-align:center; }

Isso vai centralizar a imagem, e TODO o conteúdo de todas as divs de forma global, contúdo queremos apenas a div que tem a img.

div img{ text-align: center; }

Isso está selecionando todas as img diretamente e não o element que se encontra a img.

div > img{ text-align: center; }

Isso está selecionando as img que são filhos da div e não o element que se encontra a img.

No nosso exemplo como se trata apenas de uma imagem, tanto faz usar ou não o seletor `>`, mais por que não está alinhando?...bem lembra dos tipos de display?

`inline:` ocupa apenas a width necessário, by default não posso centralizar!👎... a menos que me torne `block` ou seja envoldido por alguma tag desse tipo.
`block:` ocupa toda width disponível, by default posso centralizar👍

Possibilidades:

👉Adicionar uma classe, id na div e centralizar

.img{ text-align: center; }

👉usar o nth-child do body(n) - Você precisa indicar o número do child

body > :nth-child(6){ text-align: center; }

👍👉usar o :has - todas as divs que tem img serão afetadas

div:has(img){ text-align: center; }

👍👉Mudar img `display: block` + `margin: auto`

img nem precisa estar dentro de div, quando mudamos para block, estamos permitindo ocupar toda o largura mesmo que não precise

img{ display: block; margin: auto; }

tu ainda pode estilizar mais com:

img{ display: block; margin: auto; max-width: 50%; border-radius: 10px; }

O princípio para alinhar elementos e um pouco do pseudo-class :has

Possibilidades:

O princípio para alinhar elementos e um pouco do pseudo-class `:has`