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
    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
    el 16 may. 2019 a las 10:41
  • Y no podría poner por ejemplo un <br> dentro del <p>?
    – Alex
    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
    el 16 may. 2019 a las 16:59
  • 1
    @EMCode La costumbre de cerrar correctamente las etiquetas que es necesaria al usar XHTML.
    – phpMyGuel
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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