How to Put Text Next to an Image and Centre ("Center") Both on a Web Page (HTML/CSS)

Treating an Image and the Text Beside it as a Unit


How to Put Text Next to an Image and Centre ("Center") Both on a Web Page (HTML/CSS)

by Christopher Heng, thesitewizard.com

I was asked by a visitor how he could place text beside an image and group them so that he could treat them as a unit, to centre ("center" if you use a different variant of English) or otherwise position them on a web page.

Preamble

This article requires that you know a bit of HTML and CSS since it delves into the code needed to produce the effect requested. You don't have to be an expert, but you will need to know a little, otherwise you won't know how to apply what is taught to your situation.

Putting Text Beside an Image

There are actually many ways to put text beside an image, in such a way that you can later treat both as a single unit.

I use one such method for the example picture and text below.

Software box with feedback form script

The abbreviated HTML for the above is given below. It's abbreviated because I have removed the parts that are not relevant to the discussion, so that it's easier to read. After all, it's not as though you are going to be using the same words (or even picture) as my demo.

<div id="democontainer">
<img id="demoimage" src="../img/feedback-form-box-153x205.png" width="153" height="205">
<ul id="demotext">
<li>Free contact form</li>
<li>  [..etc..]  </li>
</ul>
<br style="clear: both;">
</div>

To flush the picture to the left of the text, I used the following CSS rule.

#demoimage {
  float: left ;
}

Since my image has an id of "demoimage", this rule takes the picture out of the document flow, and aligns it to the left.

I do the same for the text, which in the demo above is an unordered list with an id of "demotext".

#demotext {
  float: left ;
}

Since the image is specified first in the HTML order, the browser will have already, by this time, floated it to the left. As such, when it encounters this new "float: left;" for the text, it will find the space already taken. To solve this, it will place the list to the left of the element that was floated earlier, if there is enough space. (If there isn't, it will put it below that other element.)

It is also possible to use "float: right;" to cause the browser to move the list to the right of the picture. If the container into which you placed your picture and text is narrow, the result will probably look the same as using "float: left;". However, if the container is very wide, there will be a gap between the image and the text, since the former will be flushed to the left, and the latter to the right, with unused space between them. It's up to you which to use. I prefer to stack the container and text next to each other, but it really depends on what you are trying to achieve.

Note that I just happened to use an unordered list for my text. You don't have to do this. You can use a paragraph, an ordered (ie, numbered) list, a DIV block, or anything else that you want.

Finally, since I have floated the picture and text, I have added a "clear: both;" rule to the line break tag ("<br>") that follows, so that the content below will not attempt to flow around those elements. If you don't want the extra height that "<br>" adds to your page, you can add the rule to some other tag, such as an empty DIV, like this:

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

Treating the Picture and Text as a Unit and Centring ("Centering") Them

As you may have already noticed from the HTML above, I have placed both the picture and text into a DIV block. In so doing, I can now manipulate those two items as a single unit if I want.

To position both the picture and text in the middle of the page, it's just a matter of applying the standard CSS method used to centre DIV blocks.

#democontainer {
  width: 400px ;
  max-width: 100% ;
  margin-left: auto ;
  margin-right: auto ;
}

I first set the width of the container to include enough space for both the picture and the text. Then I set the left and right margins to auto. When both margins are set to auto, the web browser is obliged to give them the same amount of space. This effectively puts the DIV block in the centre of the space in which it is sitting. As mentioned in my main article on centring DIV elements, you must set a width for this to work. If you don't, the browser will automatically make the block occupy 100% of the surrounding space. Think about it. For something to be centred, it must be smaller than the surrounding space (ie, less than 100%), otherwise all talk of centring is pointless.

Since I have used pixels as the unit of measurement for the container ("width: 400px;"), I have also limited the size of the DIV block to 100% of the width of the container's container ("max-width: 100%;"). This prevents democontainer from exceeding the width of the browser window on (say) a mobile phone. You will want to do this in addition to the usual stuff you do to make your site mobile-friendly such as making your images responsive.

Mobile Phones

Note that if the combined width of your picture and text is wider than the width of the browser, one of them will be positioned underneath the other.

You can see the effect of this on my example above if you view this article on a mobile phone. Alternatively, if you are using a desktop or laptop computer, you can simply resize your browser window to see the same result. Once you hit a certain size, the browser will decide that it cannot fit both the picture and text side by side, and move the words under the picture.

In most cases, including my demo, this is what you want, since it allows both your picture and text to be read comfortably, and in logical order.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Put Text Next to an Image and Centre ("Center") Both on a Web Page (HTML/CSS)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.