Home/ Questions/Q 386759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T15:36:26+00:00

I know this is a common question but I just can’t seem to get

  • 0

I know this is a common question but I just can’t seem to get it right. I have tried everything except the one thing that will make this work, including various placements and combinations of clear and overflow settings. Here’s my code (stripped down for posting)

<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 -->

I want the text to be aligned middle and realize it’s because the actual text div (pink box) can align middle all day long and as long as it stays that height it won’t change.

Question: How do I get my text div to grow to the height of the faux picture box so I can align it to the middle of that section?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There isn’t really a good way of going about what you are trying to do. Since you have your image in its own div floated to the left it is hard to get your text div to align with it.

    I would just give the text div some top margin so that it atleast starts somewhere near the middle of the image, but obviously that is not a specific solution, its more of another option.

    If you absolutely need to have it centered one of these links could help,

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

    or

    webtoolkit.info/css-vertical-align.html

    Alternatively you could try putting the image and the text together in a single div tag and give the image vertical align: middle, as long as there are no line breaks that would align the text to the middle of the image.

    • 0