Question

我有一个网页，我希望从左侧垂直对齐我的文本，这些文本当前从右侧对齐。这是我在js小提琴中的代码：https://jsfiddle.net/r1uoyks6/ 我尝试了几个CSS属性，例如vertical-align text-align float:clear。但未能达到结果。我必须<br/>将<p>置于彼此之下。尝试display:inline-block财产但没有成功。

＆＃13;

.taker {
  margin-top: 3em;
  position: relative;
  display: inline-block;
}

.teacher {
  margin-left: 4.0em;
  margin-top: 7em;
  clear: left;
  float: right;
}

.teacher_name {
  margin-left: 4.0em;
  margin-top: -1.5em;
  vertical-align: middle;
  float: right;
  display: inline-block;
}

＆＃13;

<div class="taker">
  <p class="teacher">Submitted To,</p><br/>
  <p style="vertical-align:right;" class="teacher_name">Dr. N M Golam Zakaria</p><br/>
  <p style="vertical-align: right;" class="teacher_name">Professor</p><br/>
  <p style="vertical-align: right;" class="teacher_name">BUET</p><br/>
</div>

＆＃13;

Answer 1

CSS中right的值vertical-align不存在。也许你的意思是text-align？否则see MDN允许vertical-align。

我已从CSS中删除了所有浮动，定位和对齐规则，因此文本（默认情况下）是左对齐的。这是你想要的吗？

＆＃13;

.taker {
  margin-top: 3em;
  display: inline-block;
}

.teacher {
  margin-left: 4.0em;
  margin-top: 7em;
  vertical-align: middle;
}

.teacher_name {
  margin-left: 4.0em;
  margin-top: -1.5em;
  vertical-align: middle;
  display: inline-block;
}

＆＃13;

<div class="taker">
  <p class="teacher">Submitted To,</p>
  <br/>
  <p class="teacher_name">Dr. N M Golam Zakaria</p>
  <br/>
  <p class="teacher_name">Professor</p>
  <br/>
  <p class="teacher_name">BUET</p>
  <br/>
</div>

＆＃13;

Answer 2

您可以尝试使用此代码并始终使用text-align属性。

＆＃13;

.taker {
  margin-top: 3em;
  display: inline-block;
}

.teacher {
  margin-left: 4.0em;
  margin-top: 7em;
  text-align: left;
}

.teacher_name {
  margin-left: 4.0em;
  margin-top: -1.5em;
  text-align: left;
  display: inline-block;
  float:left;
}

＆＃13;

<div class="taker">
  <p class="teacher">Submitted To,</p><br/>

  <p class="teacher_name">Dr. N M Golam Zakaria</p><br/>
  <p class="teacher_name">Professor</p><br/>
  <p class="teacher_name">BUET</p>
</div>

＆＃13;

从左侧对齐垂直文本

2 个答案: