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.
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.
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.
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.
To flush the picture to the left of the text, I added the following CSS rule.
Since my image has an id of "demoimage", this rule takes the picture out of the
normal page 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".
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:
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.
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.
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-2019 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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
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)
