Question

我知道这是一个常见的问题，但我似乎无法做到这一点。我已经尝试了除了能使这项工作的一件事以外的一切，包括各种放置以及清除和溢出设置的组合。这是我的代码（剥离发布）

<style>

#message      { border:thin red dashed; overflow:hidden; }
#message p     { border:thin red solid; }
#line1      {   border:thin blue solid; }
#text        { text-align:center; background-color:#FCF; vertical-align:middle;}
#photo      {  float:left; width:160px; border:thick black solid;}

</style>
</head>

<body>
<div id="Main"> 
        <div id="line1">            
            <div id="message" >                     
                <div id="photo" >       <!-- floated pic box  -->
                    Pretend a picture is here. Pretend a picture is here.
                    Pretend a picture is here. Pretend a picture is here.
                </div> <!-- photo -->

                <div id="text"> Click here to see all Key West Tours, Attractions and Packages<br />
                    Buy Online and Save!
                </div> <!-- text -->

            </div> <!-- message -->
        </div> <!-- line1 -->
</div> <!-- Main -->

我希望文本在中间对齐并实现它，因为实际的文本div（粉红色框）可以整天对齐中间，只要它保持高度就不会改变。

问题：如何让我的文本div增长到人造图片框的高度，以便将其对齐到该部分的中间？

Answer 1

没有什么好方法可以解决你想要做的事情。由于你的图像在它自己的div中浮动到左边，很难让你的文本div与它对齐。

我只是给文本div一些上边距，以便它至少在图像中间附近开始，但显然这不是一个特定的解决方案，它更多的是另一种选择。

如果你绝对需要让它居中，其中一个链接可以提供帮助，

phrogz.net/CSS/vertical-align/index.html

或

webtoolkit.info/css-vertical-align.html

或者，您可以尝试将图像和文本放在一个div标签中，并将图像垂直对齐：中间，只要没有将文本对齐到图像中间的换行符。

浮箱子容器容易出现

1 个答案: