I want to place an image on the left and a paragraph on the right of my page and I want to align both of them to the center like the following image shows:
I have the following code but it doesn’t do what I want.
I can’t see your image yet, so this is a best guess for this type of question
<div class="centered">
<div class="imgbox">
then the image
</div>
<div class="textbox">
then the text
</div>
</div>
.centered {
width:to suit requirements; say 600px
margin:auto;
}
.imgbox{
width:some width that works; perhaps your 110px; or 150px (so other images will also fit)
padding:some small value, say 5px;
float:left;
}
.textbox {
width: some other width, say 400ish;
float:left;
padding:5 or 10px;
}
As mentioned above you could just float both those elements with the correct width and then place a wrapper around both of them and center the wrapper with auto margins. You would need to give the wrapper a width to match the two floats though.
Depending on situation we could do it with one wrapper assuming that dimensions are standard and known by floating the image into the padding space next to the text.