这是我正在努力的网站。 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"/> <br><br>
<p style="float:right;"> 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;"> 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>
答案 0 :(得分:0)
对于现代浏览器使用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>