Question

这是我正在努力的网站。 http://elegantcurtainsandblinds.co.uk/

顶部带有图标/图片的文字（打电话给我们，访问我们的展厅，观看我们的视频），我似乎无法保持文本彼此对齐。

所以文本应该在彼此的同一行内。每次我在图像/图标中放置空格都会向左移动。

这是代码 -

<div class="topSection">
    <div class="logo">
       <a href="<?php echo $siteURL;?>/index.php"><img src="<?php echo $siteURL;?>/images/eg_logo_new.png" alt="Logo"></a>
    </div>
<br>
<p style="float:right;"> Call Us: 01924 724848</p>
<img style="float:right;" src="images/mobile.png"/> &nbsp; &nbsp; &nbsp; <br><br>


<p style="float:right;">&nbsp; &nbsp;Visit Our Showroom</p>
<a href="https://www.google.co.uk/maps/dir/''/elegant+curtains+and+blinds/@53.6967136,-1.7011525,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x487960059226814f:0x337f355d1975d87c!2m2!1d-1.631113!2d53.696734"><img style="float:right;" src="images/images.png" height="30px" width="30px;"/></a><br><br>

<p style="float:right;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Watch Our Video</p>
<a href="https://youtu.be/DAasK7kF2DQ"><img style="float:right;" src="images/video.png" height="30px" width="30px;"/></a>


    <div class="clear"></div>
</div>

Answer 1

对于现代浏览器使用display: flex，它更容易使用。以下是您的问题的可能解决方案（点击Run code snippet查看结果）：

.topSection {
  display: flex;
  justify-content: space-between;
}

.info-container {
  display: flex;
  flex-direction: column;
}

.info {
  display: flex;
  align-items: center;
}

.info img {
  margin-right: 8px;
}

<div class="topSection">
  <div class="logo">
    <a href="http://www.elegantcurtainsandblinds.co.uk/index.php"><img src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png" alt="Logo"></a>
  </div>
  <div class="info-container">
    <div class="info">
      <img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
      <p>Call Us: 01924 724848</p>
    </div>

    <div class="info">
      <img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;">
      <p>Visit Our Showroom</p>
    </div>

    <div class="info">
      <img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px;">
      <p>Watch Our Video</p>
    </div>
  </div>
</div>

More info on flexbox

如何保持文本彼此对齐

1 个答案: