html - 如何让文本的两边对齐
问题描述
我有以下主要 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">🎹</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">🎻</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">🎷</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>
我尝试使用 inter-word 但它只排列在左侧......
解决方案
从您的问题中,很难辨别您到底想要什么。
如果您希望价格与右边缘对齐,您应该使用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
}
<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=service1>
<h1>Level 1</h1>
<div class=image>
<a href=signup.php>
<h2 id=piano></h2>
</a>
</div>
<p>Purchase the Level 1 Subscription plan!<br><br> Learn how to play the piano right from the comfort of your own home!
<dl>
<div>
<dt>Monthly fee:
<dd>$100
</div>
<div>
<dt>Yearly fee:
<dd>$800
</div>
</dl>
</div>
<div class=service1>
<h1>Level 2</h1>
<div class=image>
<a href=signup.php>
<h2 id=violin></h2>
</a>
</div>
<p>Purchase the Level 2 Subscription plan!<br><br>
Learn how to play the piano right from the comfort of your own home!
<dl>
<div>
<dt>Monthly fee:
<dd>$150
</div>
<div>
<dt>Yearly fee:
<dd>$1300
</div>
</dl>
</div>
<div class=service1>
<h1>Level 3</h1>
<div class=image>
<a href=signup.php>
<h2 id=sax></h2>
</a>
</div>
<p>Purchase the Level 3 Subscription plan!<br><br>
Learn how to play the piano right from the comfort of your own home!
<dl>
<div>
<dt>Monthly fee:
<dd>$200
</div>
<div>
<dt>Yearly fee:
<dd>$1800
</div>
</dl>
</div>
推荐阅读
- java - 在另一个 bean 的构造函数中注入 bean 的存根方法
- java - Java双重计算并转换为String
- python - 创建一个名为“firstletter”的函数,它将一个字符串作为参数。然后在函数中,打印该字符串的第一个字母
- python - 如何根据列值从数据序列中提取第一个和最后一个值?
- amazon-redshift - RedShift:regexp_substr 的问题
- vba - 如何使用 ms-access-2016 开发应用程序并使其与以前的版本兼容 (2007)
- kubernetes - 在 aks pod 中运行的 sql server 2019 容器中启动交互式 shell
- javascript - 从 element-ui 迁移到 Element-plus
- python - 在python中处理电话号码,中间有一个空格
- python - Python如何针对字典中的单个键创建多个值