Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

How to center image and text?

I want the image to float to the left and the text to the image's right. I also want both to center align, so if you resize the page, the mid-point of the image and text will be in the center.

Here is my CSS:

.content {

padding: 0 0 0 600px;

position: relative;

}

.content img {

left: 26%;

position: absolute;

top: 0;

}

.heading {

font-size: 58px;

color:#009;

font-weight:bold;

}

And the HTML:

<div class="content">

<img src="IndexFiles/concept02.png" width="220" height="340" alt="Hookah" />

<div class="heading">

<p>WTF!?!</p>

</div>

<p>Never heard of a Hookah Home Don't worry, we're innovators.<br />Call it carpet insurance.</p>

</div>

2 Answers

Relevance
  • 9 years ago
    Favorite Answer

    The easiest way is to put the elements you want to do this in inside a div that's got it's contents centered then float the image inside that to the right.

    There are several different ways of arranging this, I've shown three at http://brisray.com/test/ctrflt.htm

    Just look at the source code to see the HTML and CSS.

  • dowlen
    Lv 4
    4 years ago

    The gruesome answer is: Use a table. in case you place the image in one td and the text textile in yet another td the text textile will immediately veritcally-align center. i'm optimistic there is the thank you to try this might CSS, yet i've got in no way had a lot success with vertical-align:center interior divs.

Still have questions? Get your answers by asking now.