Drupal

Código html e css dunha táboa

Lenda da táboa
ano webs páxinas Liñas
1 2 3 4 5
6 7 8 9

Aínda que moita xente emprega as táboas para maquetar (construir a plantilla ou layout), as táboas só se deben de empregar para gardar datos numéricos. Presento un pequeno exemplo sen funcionalidade ningunha, pero nel compártense filas e columnas e dáselle estilos con código css.

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Táboa</title>
    <style>
    table{
        width:70%;
        margin:0 auto;
    }    
    table, tr, th, td{
        border:1px solid grey;
        border-collapse: collapse;
    }
    table th[scope="col"]{
        background-color:rgba(25,25,25,0.2);        
    }
    table th[scope="row"]{
        background-color:rgba(125,205,75,0.2);
        
    }
    td{
        text-align: center;
    }
    </style>
</head>
<body>
    <table>
        <caption>Lenda da táboa</caption>
        <thead>
            <tr>
                <th colspan="2" scope="col">ano</th>    
                <th scope="col">webs</th>
                <th scope="col">páxinas</th>
                <th scope="col">Liñas</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <th data-title="ano" scope="row">1</th>
            <th data-title="ano" scope="row">2</th>
            <td>3</td>
            <td>4</td>
            <td rowspan="2">5</td>
            </tr>
            <tr>  
            <th data-title="ano" scope="row">6</th>
            <th data-title="ano" scope="row">7</th>
            <td>8</td>
            <td>9</td>
            
            </tr>  
        </tbody>
    </table>
</body>
</html>

Agregar textos e imaxes desde CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            color:blue;
            padding: 50px;
        }
        .logo:after{
            content:url(./img/logo-agency.png);                      
        }        
        .logo{
            margin:20px auto;
        }
        .container:after{
            content:"String en un div";  
        }
        .imaxedefondo{
            width:300px;
            height:200px;
            background-image:url('./img/header.jpg');
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: cover;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo"></div>
    </div>
    <div class="imaxedefondo">
    </div>
</body>
</html>

Numeración personalizada dunha lista ordenada html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador

        }

        #lista ol li:before{
            content:counter(contador) ".- " ;
            color:grey;
            margin-left:50px;
        }

 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

No caso de queren engadir unha icona de font awesome, deberemos de seleccionar a fonte polo código unicode. Neste exemplo escollemos a imaxe de play, con código unicode f144, tal e como podemos ver na seguinte imaxe:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador;
        }

        #lista ol li:before{
            font-family: FontAwesome;
            content: "\f144  " counter(contador) ;
            
            color:grey;
            margin-left:60px;
        }
 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

Ou tamén engadindo a clase na etiqueta <li> dentro do body

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            display: inline;
        }

        #lista ol li:before{
           
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>
        
        
    <section id="lista">
        <ol>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>

     
        </ol>
    </section>
</body>
</html>

No caso de que teñamos a imaxe da icona descargada, podemos engadila do seguinte xeito:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            list-style-image:url(./iconos/claqueta_negra.png);
        }

        #lista ol li:before{
            
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>      
        
    <section id="lista">
        <ol>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>     
        </ol>
    </section>
</body>
</html>

Máis de tres divs centrados horizontalmente

No caso que teñamos que centrar máis de tres divs, entendo que se volve moi útil a clase flexbox de css. Sempre se pode facer con float:left, pero resulta enfarragoso, ao meu entender.

CON FLEXBOX:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .fila{
        width:80%;
        padding: 5px;
        margin:20px auto;
        background:#f2f2f2;
        display:flex;
        justify-content: space-around;
    }
    .col{
        width:15%;
        height:200px;
        border-radius: 5px;
    }
    .col1{
        background:green;
    }
    .col2{
        background:pink;
    }
    .col3{
        background:violet;
    }
    .col4{
        background:blue;
    }
    .col5{
        background:tomato;
    }
    </style>
</head>
<body>
    <div class="contenido">
        <div class="fila">
            <div class="col col1"></div>
            <div class="col col2"></div>
            <div class="col col3"></div>
            <div class="col col4"></div>
            <div class="col col5"></div>
        </div>
    </div>
    
</body>
</html>

2. CON GRID

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .fila{
        width:80%;
        padding: 5px;
        margin:20px auto;
        background:#f2f2f2;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-gap:20px;
    }
    .col{
        width:100%;
        height:200px;
        border-radius: 5px;
    }
    .col1{
        background:green;
    }
    .col2{
        background:pink;
    }
    .col3{
        background:violet;
    }
    .col4{
        background:blue;
    }
    .col5{
        background:tomato;
    }
    </style>
</head>
<body>
    <div class="contenido">
        <div class="fila">
            <div class="col col1"></div>
            <div class="col col2"></div>
            <div class="col col3"></div>
            <div class="col col4"></div>
            <div class="col col5"></div>
        </div>
    </div>
    
</body>
</html>

Tres divs centrados horizontalmente

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .wrapper{
        width:70%;
        margin:50px auto;
        text-align: center;
        background:#F2F2F2;
        padding: 20px;
        border-radius:7px;
    }

    .box{
        width:30%;
        height:300px;
        border-radius: 5px;
    }

    .esquerda{
        background:red;
        float:left;
    }

    .centro{
        background: greenyellow;
        display:inline-block;
        margin:0 auto;
    }
    
    .dereita{
        background:violet;
        float:right;
    }
 
    </style>
</head>
<body>
    <div class="wrapper">
           <div class="esquerda box"> </div>

           <div class="centro box"> </div>

           <div class="dereita box"> </div>
    </div>
</body>
</html>

 

2. CON FLEXBOX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .wrapper{
        width:70%;
        margin:50px auto;
        text-align: center;
        background:#F2F2F2;
        padding: 20px;
        border-radius:7px;
        display:flex;
        
        
    }

    .box{
        width:30%;
        height:300px;
        border-radius: 5px;
        margin:0 auto;
    }

    .esquerda{ background:red;}

    .centro{background: greenyellow;}
    
    .dereita{background:violet;}
 
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda box">

        </div>

        <div class="centro box">

        </div>

        <div class="dereita box">

        </div>


    </div>
</body>
</html>

Tamén temos a posibilidade de empregar justify-content:space-around na clase .wrapper e eliminar da clase .box o margin:0 auto;

Texto en columnas html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        box-sizing:border-box;
        margin:0;
        padding:0;
    }  
    html{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    #wrapper{
        width:80%;
        height:300px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
    }  
    .column-three{
        text-align: justify;
        column-count: 3;
        column-gap: 40px;
        column-rule: 2px solid tomato;

    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="column-three">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptates atque ipsa, ea dolor debitis fugit esse neque obcaecati explicabo laboriosam commodi culpa earum iure facilis possimus necessitatibus nemo cum tempora cumque! Accusantium tempore odio, delectus quibusdam porro in voluptas voluptate a sapiente? Eligendi atque nemo enim rem nihil nostrum unde explicabo, maiores dolore, quam quis ipsam suscipit consectetur corrupti?</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officiis neque ab. Debitis, illo. Harum doloremque voluptas illo facere dolores! Aliquam, reiciendis vitae? Reprehenderit officiis minima vitae harum tempora veritatis cupiditate libero, atque ipsam ex ullam impedit. Adipisci consequuntur ex non. Libero asperiores eaque amet, suscipit officia quaerat exercitationem est illum quasi, quidem dolor unde, minima dolore quis. Numquam aperiam accusamus error blanditiis porro quisquam eius. Quae inventore molestias provident sed eum, quos quis harum quasi veritatis voluptates quia dolore.</p>
        </div>
    </div>
    
</body>
</html>

Dous divs centrados horizontalmente

Cando queremos engadir nunha páxina web ou no Dupral dous dívs centrados en horizontal, podémolo facer de varios xeitos, sen embargo entendo que o máis razonable é asignándolle con css ao da esquerda float:left;, e ao da dereito float: right;

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    
    <style>
    #main{
        width:80%;
        max-width: 1500px;
        margin:0 auto;
        background-color:grey;
    }
    .container{
        text-align: center;
        width:45%;
        height:auto;
        border:2px solid black;
        border-radius:7px;
        background-color:#888888
    }  
    .div_esq{
        float:left;
    }
    .container img{
        width:100%;
    }
    .div_dr{
        float:right;
       
    }     
    </style>
</head>

<body>
    <div id="main">
        <div class="container div_esq">
            <h2>Fisterra</h2>
            <figure>
                <img src="https://cmatv.xunta.gal/voooblicuo/VooOblicuo_1952.jpg" alt="Faro de Fisterra">
            </figure>
        </div>
        <div class="container div_dr">
            <h2>Corrubedo</h2>
            <figure>
                <img src="https://cmatv.xunta.gal/voooblicuo/VooOblicuo_1468.jpg" alt="Faro de Corrubedo">
            </figure>

        </div>
    </div>
</body>
</html>

Engadir un vídeo adaptable a dispositivos móbiles

En moitas ocasión non é previsible controlar o tamaño que debe de ter un vídeo á hora de engadilo ao Drupal. Isto ocorre nalguhas resolucións xa que as dimensións do vídeo superan o ancho dispoñible, ou no caso de que haxa cambios estrutura dos bloques, pasando de unha columna a dúas.

Para darlle remedio a este problema, debemos de empregar os estilos CSS.

 

A. UN VÍDEO DE YOUTUBE

 

1. Escollemos o vídeo de youtube desexado. Clic en compartir e posteriormente en inserir. Obtemos un código  html como o seguinte:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Se nos fixamos, como width é de 560px e o height é de 315, a relación ancho con respecto ao alto é 16:9. Se dividimos 9/16=0.5625, que ven a ser o 56.25%, que é a relación que engadimos ao padding-bottom. Se a relación entre ancho e alto fose 4:3, como padding-top sería do 75% (3/4=0.75, é dicir o 75%)

2. Deste código eliminamos as dimensións de ancho de alto (width e height), quedado así:

<iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. Inserirmos este código dentro do body do seguinte código html, quedando así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .video-responsive{
            position:relative;
            overflow:hidden;
            padding-bottom:56.25%;
        }
        .video-responsive iframe{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
        }    
    </style>
</head>
<body>

        <div class="video-responsive">
                <iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

    
</body>
</html>

 

B. UN VÍDEO SUBIDO AO DRUPAL COMO DOCUMENTO ADXUNTO

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
    .video-responsive {
        position: relative;
        margin:0 auto;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
    }
    .video-responsive video {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left:0;        
    }
    </style>
</head>

<body>
    <div class="video-responsive">
        <video controls="controls">
            <source src="http://www.edu.xunta.gal/centros/crasantacomba/system/files/CESTA%20VIAXEIRA%20DE%20OVOS.mp4" type="video/mp4" />
            O teu navegador non soporta este vídeo.
            </video>
    </div>
</body>
</html>

 

Como facer unha plantilla (layout) de maneira manual sen empregar táboas

En ocasións queremos facer unha plantilla para engadir fotos, texto, etc e que non se movan os contidos á hora de editar  unha páxina web, tanto en Drupal como programando directamente en html.

Aínda que hai moitas alternativas, expoño unha sinxela de entender: a creación de celas con filas e columnas.

1. O primeiro paso é crear o contedor global. Eu voulle chamar wrapper.

2. Dentro de wrapper engadimos outro div co nome de contidos. A utilizade de independizar contedores é a de pode engadirlles fondos, centrarlos, configurar as fontes para cada div, etc.

3. Seguidamente inserimos dentro de contidos un div cunha clase fila.

4. E finalmente dividimos a fila en tantas columnas como desexemos, iso si, tendo en conta o espazo entre as mesmas. Isto podemos facelo con float left e estudando os pixeles ou porcentaxe, ou ben, xa de forma máis cómoda, empregando a clase flexbox, que nos facilita o cálculos e a disposición na pantalla.

Vou definir o div en html do seguinte xeito: <div class="col tres estilo_columna"></div>

 

Con float-left:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
    }

    .col{
        float:left;
        height:80px;
        margin-left:10px;
        margin-right:10px;
    }

    .tres{
        width:100px;
    }

    .estilo_columna{
        background:olive;
    }
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <h4>fila</h4>
                <div class="col tres estilo_columna"></div>
                <div class="col tres estilo_columna"></div>
                <div class="col tres estilo_columna"></div>
            </div>
        </div>
    </div>
    
</body>
</html>

Se queremos facelo empregando porcentaxes e non en pixeles, para que o contido se adapte aos dispositivos móbiles, podemos deixar un marxe á esquerda e á dereita do 3%. Poderíamos definir as clases col e tres do seguinte xeito:

    .col{
        float:left;
        height:80px;
        margin-left:3%;
        margin-right:3%;
    }

    .tres{
        width:27.3%;
    }

Para calcular o ancho que lle damos á clase tres, debemos de ter en conta o ancho dos espazos intermedios, fixándonos que entre celas é do 6%, e nos bordes do 3%.

ancho_cela=(100 -(3*6))/3=82/3=27.3%

 

Sen embargo, debemos de ter en conta que cada vez que empregamos un float left, debemos de inserir un clear:both; pois os contidos que veñen a continuación pódense ver afectados polo float:left. Para isto, engadiremos un clear:both antes e despois da clase fila, que é o elemento pai das tres columnas. Aínda que chegaría con clear:both, voulle dar máis seguridade para que teñamos certeza de que queda limpo como é debido:

.fila:after, .fila:before{
    content: "";
    width:0;
    height: 0;
    clear:both;
    display:block;
    overflow: hidden;
    visibility: hidden;
}

 

E o código do que levamos feito queda do seguinte xeito:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
    }

   
    .col{
        float:left;
        height:80px;
    }

    .aux_left{
        width:3%;
        background:greenyellow;
    }

    .aux_right{
        width:3%;
        background:pink;
    }

    .tres{
        width:27.3%;
    }

    .estilo_columna{
        background:olive;
    }

    p{
        text-align:center;
    }

    .fila:after, .fila:before{
    content: "";
    width:0;
    height: 0;
    clear:both;
    display:block;
    overflow: hidden;
    visibility: hidden;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <h4>fila</h4>
                <div class="col aux_left"> <p>3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"> <p>3%</p> </div>
                <div class="col aux_left"><p>3%</p> </div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"> <p>3%</p></div>
                <div class="col aux_left"> <p>3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"><p>3%</p> </div>
            </div>
        </div>
    </div>
    
</body>
</html>

CON FLEXBOX

Con flexbox, simplifícase moito. Tan só no elemento pai das columnas (neste caso fila), engadimos display:flex; e justify-content:space-around; A propia clase xa nos divide o espazo restante entre os ocos, de igual que facíamos no caso anterior, empregando float:left;

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
        display:flex;
        justify-content: space-around;
        
    }
    .col{
        height:80px;
    }
    .tres{
        width:27.3%;
    }
    .estilo_columna{
        background:olive;
    }
    p{
        text-align:center;
        color:white;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
            </div>
        </div>
    </div>
    
</body>
</html>

CON GRID

Coa clase grid, o deseño aínda se simplifica máis. Nin tan sequera temos porque definir as filas. Xa se encarga grid de todo. Velaquí temos un exemplo:

 

E este é o código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap:10px;
    }

    .col{
        height:80px;
    }
   
    .estilo_columna{
        background:olive;
    }
    p{
        text-align:center;
        color:white;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            
            
                <div class="col estilo_columna"></div>
                <div class="col estilo_columna"></div>
                <div class="col estilo_columna"></div>
            
        </div>
    </div>
    
</body>
</html>

Centrar unha imaxe horizontalmente

OPCIÓN 1. Con margin:0 auto;. Debemos colocar un display:block, xa que por defecto as imaxes son elementos inline-block. Se colocasemos o margin:0 auto; dentro do elemento pai, serviría para centrar este, pero non para centrar a imaxe.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
    }    
    img{
        display:block;
        margin:0 auto;
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 2. Con align-text:center. Neste caso debemos de colocar align-text:center no elemento pai. Neste exemplo colocámolo no body. Sen embargo, o normal é inserir a imaxe dentro dun div, e colocar o align-text no div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
        text-align: center;
    }    
    img{
        
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 3. Empregamos o margin:0 auto para centrar un div, e tamén text-align:auto dentro do div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>

Se ademais queremos centrala verticalmente dentro do div pai, podemos facelo de varios xeitos. Por exemplo inserir a imaxe dentro dun div, que sexa fillo do div wrapper. Ou máis sinxelo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    img{
        height:300px;
        margin-top:200px;
        transform:translateY(-50%)
    }
    
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>

Subscribe to Drupal