Question

代码是：

    <div>
        <div style="width:15%; float:left; background: red;">
            <img src="C:\Users\64\Desktop\Furrycode\img\clock.png" style="width: 20%; height: auto; display: block; margin:0 auto; text-align: center;">
        </div>
        <div style="width:82%; float: right; background: red; padding-left:3%;">
            <p>Monday-Friday: Check-in and Check-out between 8am-11am and 3pm-5pm.</p>
            <p>Saturday: Check-in between 9am-11am. Check-out between 9am-3pm.</p>
            <p>Sundays/Public Holidays: Check-in and Check out between 11am-1pm.</p>
            <p>(Please note we are closed Good Friday, Easter Sunday, Christmas Day and Boxing Day).</p>
        </div>
    </div>

    <div style="clear:both"></div>

我真的需要它们垂直对齐（对于负责人来说）。

非常感谢你。

Answer 1

只需添加vertical-align: middle并将其设置为display: inline-block并将浮动内容移至div

<强> HTML

<div>
        <div style="width:15%; background: red; display:inline-block; vertical-align:middle;">
            <img src="C:\Users\64\Desktop\Furrycode\img\clock.png" style="width: 20%; height: auto; display: block; margin:0 auto; text-align: center;">
        </div>
        <div style="width:82%; background: red; padding-left:3%; display:inline-block; vertical-align:middle;">
            <p>Monday-Friday: Check-in and Check-out between 8am-11am and 3pm-5pm.</p>
            <p>Saturday: Check-in between 9am-11am. Check-out between 9am-3pm.</p>
            <p>Sundays/Public Holidays: Check-in and Check out between 11am-1pm.</p>
            <p>(Please note we are closed Good Friday, Easter Sunday, Christmas Day and Boxing Day).</p>
        </div>
    </div>

<强> DEMO HERE

Answer 2

当您使用浮动时，您的div的位置将尝试适合内联。如果你希望它们在彼此的顶部，我会让你的宽度达到100％。这是改动的代码。

 <div>
      <div style="width:100%; float:left; background: red;">
           <img src="C:\Users\64\Desktop\Furrycode\img\clock.png" style="width: 100%; height: auto; display: block; margin:0 auto; text-align: center;">
      </div>
      <div style="width:100%; float: left; background: red; text-align: center;">
        <p>Monday-Friday: Check-in and Check-out between 8am-11am and 3pm-5pm.</p>
        <p>Saturday: Check-in between 9am-11am. Check-out between 9am-3pm.</p>
        <p>Sundays/Public Holidays: Check-in and Check out between 11am-1pm.</p>
        <p>(Please note we are closed Good Friday, Easter Sunday, Christmas Day and Boxing Day).</p>
    </div>

如何在容器内垂直对齐图像和文本

2 个答案: