Skip to main content
se eliminaron 3 caracteres en el cuerpo
Origen Enlace
David
  • 1.9k
  • 1
  • 9
  • 21

La forma más sencilla de centrar un texto en la dirección que quieres es utilizar la disposición flexible y jugar con el margin: auto en la dirección por la que quieras empujar tu texto. Puedes leer más información acerca de la disposición flex en el este enlace. Te pongo un ejemplo práctico:

La forma más sencilla de centrar un texto en la dirección que quieres es utilizar la disposición flexible y jugar con el margin: auto en la dirección por la que quieras empujar tu texto. Puedes leer más información acerca de la disposición flex en el este enlace. Te pongo un ejemplo práctico:

La forma más sencilla de centrar un texto en la dirección que quieres es utilizar la disposición flexible y jugar con el margin: auto en la dirección por la que quieras empujar tu texto. Puedes leer más información acerca de la disposición flex en este enlace. Te pongo un ejemplo práctico:

se añadieron 144 caracteres en el cuerpo
Origen Enlace
David
  • 1.9k
  • 1
  • 9
  • 21

La forma más sencilla de centrar un texto en la dirección que quieres es utilizar la disposición flexible y jugar con el margin: auto en la dirección por la que quieras empujar tu texto. Puedes leer más información acerca de la disposición flex en el este enlace. Te pongo un ejemplo práctico:

La forma más sencilla de centrar un texto en la dirección que quieres es utilizar la disposición flexible y jugar con el margin: auto en la dirección por la que quieras empujar tu texto. Te pongo un ejemplo práctico:

La forma más sencilla de centrar un texto en la dirección que quieres es utilizar la disposición flexible y jugar con el margin: auto en la dirección por la que quieras empujar tu texto. Puedes leer más información acerca de la disposición flex en el este enlace. Te pongo un ejemplo práctico:

Origen Enlace
David
  • 1.9k
  • 1
  • 9
  • 21

La forma más sencilla de centrar un texto en la dirección que quieres es utilizar la disposición flexible y jugar con el margin: auto en la dirección por la que quieras empujar tu texto. Te pongo un ejemplo práctico:

.d-flex{
  display: flex;
}
.mr-auto{
  margin-right: auto;
}
.mx-auto{ 
  margin-left: auto;
  margin-right: auto;
}
.ml-auto{
  margin-left: auto;
}
<div class="d-flex">
  <h1 class="mr-auto">TEXTO A LA IZQUIERDA</h1>
</div>  

<div class="d-flex">
  <h1 class="mx-auto">TEXTO AL CENTRO</h1>
</div>  

<div class="d-flex">
  <h1 class="ml-auto">TEXTO A LA DERECHA</h1>
</div>  

Aplicándolo a tu código sería de la siguiente manera:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous">
    
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<title>Vapers de LGS</title>
</head>

<script>

$(document).ready(function(){
    
    $('.carousel').carousel({
       duration:5
     });
   
    $('.next').click(function(){
         $('.carousel').carousel('next');            
    });
    
    $('.prev').click(function(){
         $('.carousel').carousel('prev');
    });
 });
 
</script>

<!-- Algunos de los estilos de la página de vapers entre ellos el fondo, los textos, colores, fotos... -->

<style>

body {
    background-image:
        url("https://d1di2lzuh97fh2.cloudfront.net/files/2f/2fq/200/2fqq8a.png?ph=6fd8d12f56");
    text-align: center;
}

.d-flex{
    display:flex;
}

.flex-column{
    flex-direction: column;
}

h1 {
    color: green;
    font-size: 55px;
    font-style: italic;
    font-weight: bold;
    margin-right: auto;
}

p {
    color: green;
    font-family: fantasy;
    font-style: italic;
    font-size: 40px;
    font-weight: bold;
    margin-right: auto;
}

p1 {
    color: white;
    font-size: 25px;
}

p2 {
    color: white;
    font-family: fantasy;
    font-size: 20px;
}

p3 {
    color: white;
    font-size: 20px;
    text-align: left;
}

p4 {
    color: white;
    font-family: fantasy;
    font-size: 20px;
}

.carousel .carousel-item img {
    width: 150%;
    max-height: 300px;
    align: center;
}

.carousel-item {
 transition: 1.0s ease all;
}

</style>

<!-- Aquí va la estructura de la visualización de las fotos de los vapers con sus respectivos nombres y precios -->

<body>
  <div class="d-flex flex-column">
    <h1>LegaGrow Shop</h1>
    <p>Los mejores Vapers de Leganés</p>
  </div>
       <div class="carousel" data-indicators="true" adaptiveHeight="true">
        <a class="carousel-item"><img src="https://www.vaperss.com/wp-content/uploads/2018/02/smok-vape-pen-22-kit-1650-mah-batera-e-cigarrillo-negro-2ml-tpd-cumple-600x600.jpg"></a> 
        
        <a class="carousel-item"><img src="https://www.vaperss.com/wp-content/uploads/2018/02/smok-vape-pen-box-contents-768x673.jpg"></a> 

        <a class="carousel-item"><img src="https://www.vaperss.com/wp-content/uploads/2018/02/86.jpg"></a> 

        <a class="carousel-item"><img src="https://www.vaperss.com/wp-content/uploads/2018/02/smok_vape_pen_22_starter_kit_6_.jpg"></a> 

      </div>
    
    <p1><strong>Vaper Fino Negro/Gris 24,99€</strong></p1>
    
    <br></br>
    
    <div class="btn green  waves-effect prev" align="center">Anterior</div>
    <div class="btn green  waves-effect next" align="center">Siguiente</div>
    
    <br></br>
    
    <div href="inicio.html" onclick="" class="btn purple waves-effect back" align="center">Atrás</div>
    
    <br></br>
    <br></br>

      <p3 text-align="left"><strong>Descripción:</strong></p3> 
    
</body>
</html>