无法将文字对齐

Question

我想问一下为什么text-align:right在这种情况下不起作用。所以目前我有一个div，里面有一些地图和文字。基本上下面的图片显示了它现在的样子，我希望将文本对齐，但它不起作用。此外，我尝试删除浮动，但它将我的地图向下推，仍然不会将文本与右侧对齐

.locationdiv {
  width: 960px;
  height: 285px;
  background-color: #5c89c7;
  margin: 30px auto 0 auto;
}
#map2 {
  float: right;
}
.map2p {
  float: left;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: white;
  padding-top: 9px;
  padding-left: 145px;
  right: 0;
}

<div class="locationdiv">
  <p class="map2p">
    <span style="font-weight:800; font-size:28px; font-family: 'Roboto', sans-serif;">Hong Kah Diabetes Education <br>& Care Centre</span>
    <br>
    <br>Blk 528 Jurong West St 52
    <br>#01-353 Singapore 640528
    <br>
    <br>Tel : (65) 6564 9818, (65) 6564 9819
    <br>Fax: (65) 6564 9861
    <br>
    <br>Opening Hours:
    <br>Monday-Friday 8.30am - 5.00pm
    <br>Saturday 8.30am - 12.30pm
    <br>Sunday Closed</p>

  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.7135200721114!2d103.71451791437465!3d1.3483820990165771!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da0fc328223963%3A0xe558feaadf0564e8!2sSouth+West+Diabetes+Education+and+Care+Centre!5e0!3m2!1sen!2ssg!4v1482145868140"
  width="390" height="285" frameborder="0" id="map2" style="border:0" allowfullscreen></iframe>
</div>

Answer 1

我不确定我是否看到了这个问题。我在text-align: right的底部添加了.map2p，它正确对齐。看看：

.locationdiv {
  width: 960px;
  height: 285px;
  background-color: #5c89c7;
  margin: 30px auto 0 auto;
}
#map2 {
  float: right;
}
.map2p {
  float: left;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: white;
  padding-top: 9px;
  padding-left: 145px;
  right: 0;

  text-align: right;
}

<div class="locationdiv">
  <p class="map2p">
    <span style="font-weight:800; font-size:28px; font-family: 'Roboto', sans-serif;">Hong Kah Diabetes Education <br>& Care Centre</span>
    <br>
    <br>Blk 528 Jurong West St 52
    <br>#01-353 Singapore 640528
    <br>
    <br>Tel : (65) 6564 9818, (65) 6564 9819
    <br>Fax: (65) 6564 9861
    <br>
    <br>Opening Hours:
    <br>Monday-Friday 8.30am - 5.00pm
    <br>Saturday 8.30am - 12.30pm
    <br>Sunday Closed</p>

  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.7135200721114!2d103.71451791437465!3d1.3483820990165771!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da0fc328223963%3A0xe558feaadf0564e8!2sSouth+West+Diabetes+Education+and+Care+Centre!5e0!3m2!1sen!2ssg!4v1482145868140"
  width="390" height="285" frameborder="0" id="map2" style="border:0" allowfullscreen></iframe>
</div>

Answer 2

将display:flex添加到css中的locationdiv类，

还需要调整<{1}}中的填充

map2p

.locationdiv {
  width: 960px;
  height: 285px;
  background-color: #5c89c7;
  margin: 30px auto 0 auto;
  display:flex;
}
#map2 {
  float: right;
}
.map2p {
  float: left;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: white;
  padding-top: 9px;
  padding-left: 100px;
  right: 0;
}

Answer 3

使用它而不是text-align：right;

  

方向：RTL;

使用它而不是text-align：left;

  

方向：LTR;