0

hace poco días puse una pregunta sobre el carrusel, ya he avanzado y ahora estoy en otra pagina, donde quiero que el texto "Descripción: se ponga a la izquierda, he probado varias cosas como el text-align, align y demás pero se sigue manteniendo en el centro, creo que el problema es por el pero no estoy seguro. He quitado parte porque era demasiado extenso, la parte a solucionar se encuentra en el final del código. Gracias Aquí os dejo el código.

<style>

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

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

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

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>

	<h1>LegaGrow Shop</h1>
	<p>Los mejores Vapers de Leganés</p>
	
	   <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>

<!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;
}

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

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

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>

	<h1>LegaGrow Shop</h1>
	<p>Los mejores Vapers de Leganés</p>
	
	   <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>

3 respuestas 3

8

Tienes un poco de locura ahí montada, como <p> que deberían estar dentro de <div>, <br /> para manejar el espacio entre elementos... Pero siendo directo con el enunciado de tu pregunta, lo que haría sería meter el párrafo descripción dentro de un <div> que ocupe el 100% del width y luego a ese párrafo ya darle un text-align: left.

Por otro lado las etiquetas <p1>, <p2>, <p3> no se comportan de manera natural como lo hace la etiqueta <p>, por lo que no se van a adaptar al 100% del width de su contenedor midiendo estos lo que su contenido les marca. Para que se comporten de una manera que acepte el text-align: left le he dado al <p3> un width: 100% y un float: left.

.izquierda {
  width: 100%;
  float: left
}

.izquierda p3 {
  text-align: left;
  width: 100%;
  float: left;
}
<style>

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

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

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

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>

	<h1>LegaGrow Shop</h1>
	<p>Los mejores Vapers de Leganés</p>
	
	   <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>
  <div class="izquierda">
      <p3><strong>Descripción:</strong></p3> 
  </div>
	
</body>
</html>

6
  • Sencillamente era eso si, muchas gracias. Una ultima cosa para poner un punto y aparte dentro del <p> qué etiqueta era?
    – Alex
    Commented el 16 may. 2019 a las 10:39
  • Hacer otro <p>. Los <p> son párrafos y linguisticamente un párrafo es el conjunto de caracteres existentes antes de un punto y aparte.
    – phpMyGuel
    Commented el 16 may. 2019 a las 10:41
  • Y no podría poner por ejemplo un <br> dentro del <p>?
    – Alex
    Commented el 16 may. 2019 a las 10:42
  • 1
    @phpMyGuel no se recomienda cerrar los <br> por ser un uso obsoleto para HTML5, no es necesario cerrar algo que no contiene nada "internamente"
    – EMCode
    Commented el 16 may. 2019 a las 16:59
  • 1
    @EMCode La costumbre de cerrar correctamente las etiquetas que es necesaria al usar XHTML.
    – phpMyGuel
    Commented el 16 may. 2019 a las 18:28
3

por lo que ví, tenés el body con esta propiedad: text-align: center; lo que va a hacer, es que te centre toda la pagina sin importar nada. Probé quitándolo y funciona. Si querés centrar otros divs entonces debes hacerlo llamandolo por la clase, no en el body! Espero que te sirva! Saludos

2

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:

.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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.