freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7791367417b2b2512ab3	Create Visual Balance Using the text-align Property	0		Crear balance visual usando la propiedad text-align

Description

Esta sección del currículo se enfoca en el Diseño Visual Aplicado. El primer grupo de desafíos se basa en el diseño de la tarjeta dada para mostrar una serie de principios básicos. El texto es a menudo una gran parte del contenido web. CSS tiene varias opciones para alinearlo con la propiedad text-align . text-align: justify; hace que todas las líneas de texto, excepto la última línea, se encuentren con los bordes izquierdo y derecho del cuadro de línea. text-align: center; Centra el texto text-align: right; alinea a la derecha el texto y alinea el texto text-align: left; (el valor predeterminado) alinea a la izquierda el texto.

Instructions

Alinee el texto de la etiqueta h4 , que dice "Google", al centro. Luego justifique la etiqueta de párrafo que contiene información sobre cómo se fundó Google.

Tests

tests:
  - text: Su código debe usar la propiedad text-align en la etiqueta <code>h4</code> para establecerla en el centro.
    testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
  - text: Su código debe usar la propiedad text-align en la etiqueta <code>p</code> para configurarlo para justificar.
    testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'

Challenge Seed

<style>
  h4 {

  }
  p {

  }
  .links {
    margin-right: 20px;

  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Solution

// solution required

2.7 KiB Raw Blame History