Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS |
Como criar uma DIV redonda e alinhar o seu conteúdo ao centro usando as propriedades display, border-radius, justify-content e align-items do CSSQuantidade de visualizações: 950 vezes |
|
Nesta dica mostrarei como podemos criar DIVs redondas, ou seja, circulares usando a propriedade border-radius do CSS. Por ser redonda, é claro que vamos querer que o conteúdo da DIV seja alinhado ao centro, tanto na horizontal quanto na vertical. Para isso nós vamos usar as propriedades display, justify-content e align-items. Note também as definições da cor de fundo, margens e espaçamento interno do elemento HTML. Eis o código HTML completo para o exemplo:
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
#div_redonda{
display: flex;
justify-content: center;
align-items: center;
background-color: #f1f8e9;
padding: 10px;
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div_redonda">HTML5</div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
