Question

我有以下html主页面，我正在尝试进行文本对齐：justfiy;证明：词间；但它似乎不起作用。这是否意味着在文本的两边都加行使其看起来像块？我不确定我是否解释得足够好，但是希望你们明白我的追求：

div.service1 p {
  font-size: 20px;
  color: #000000;
  max-width: 250px;
  text-align: justify;
  text-justify: inter-word;
  margin-left: 20px;
  margin-top: 20px;
}

<div class="main-wrapper">
  <div class="first">
    <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! It doesn't matter if your child has no music foundation because there are lessons suitable for beginners and advanced students! Based
      on the "Bastien Piano Basics series", your child will be able to learn the basic hand positions, posture, finger numbers and letter names!<br>There are four levels in the "Bastien Piano Basics" series, beginning with the primer level, which is suitable
      for beginners. Once your child has completed the primer level, your child will be able to progress to Level 1, follow by Level 2 and Level 3.<br>Currently, PianoCourse101 lessons are mainly for children but we also encourage if you are an adult
      and also wish to learn how to play the piano to join us! In due course, there will also be lessons for adults!</h2>
  </div>
</div>

<div class="form">
  <form class="signup-form" action="newsletters.php" method="POST">
    <div class="newsletters">
      <label>Enter your E-mail Address</label>
    </div>
    <br>
    <div class="index_form">
      <input type="text" name='email' placeholder="Enter E-mail Address">
    </div>
    <br>
    <button type="submit" name="submit">Subscribe to PianoCourse101!</button>
    <br>

  </form>
</div>

<img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" />

<div class="services_heading">Services</div>
<div class="services">
  <div class="service1">
    <h1>Level 1</h1>
    <div class="image">
      <a href="signup.php">
        <p id="piano">&#127929;</p>
      </a>
    </div>
    <p>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</p>
  </div>

  <div class="service1">
    <h1>Level 2</h1>
    <div class="image">
      <a href="signup.php">
        <p id="violin">&#127931;</p>
      </a>
    </div>
    <p>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</p>

  </div>
  <div class="service1">
    <h1>Level 3</h1>
    <div class="image">
      <a href="signup.php">
        <p id="sax">&#127927;</p>
      </a>
    </div>
    <p>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</p>
  </div>
</div>

我尝试使用中间单词，但它仅使左侧对齐...

Answer 1

根据您的问题，很难分辨出您到底想要什么。

如果您希望价格与右边缘对齐，则应将$transfer = \Stripe\Transfer::create(array( "amount" => 50, "currency" => "eur", "destination" => "acct_180W54CRJ51SjjGi", "transfer_group" => "ORDER_95" ));用于布局的某些部分。

如果您想在使用flexbox时使文本齐平对齐，则需要使用以下text-align: justify属性启用连字：

CSS

-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

.main-wrapper {
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

div.service1 p,
dl {
  width: 250px;
  margin-top: 20px;
  margin-left: 20px
}

dl,
dl div {
  display: flex
}

dl {
  flex-direction: column
}

dl div {
  justify-content: space-between
}

如何使文本的两边对齐

1 个答案: