Home/ Questions/Q 7986051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:44:11+00:00

I am currently using UIWebview for some rich text formatting. I would like to

  • 0

I am currently using UIWebview for some rich text formatting. I would like to center on the same line a succession of an icon (PNG image) followed by a caption. I am having issue to set up correctly my css style to get the expected effect. It is more a css related question than on Objective C.

So far what I have done is:

NSString* htmlContentString = [NSString stringWithFormat:
                                   @"<html>"
                                   "<style type=\"text/css\">"
                                   "h1 { font-size: 40px;\
                                         font-family: Wisdom Script;\
                                         text-align: center;\
                                         margin-top:5px;\
                                         margin-bottom:0px;\
                                         background-color: black;\
                                   }"
                                   "body { background-color:transparent;\
                                           font-family:Helvetica;\
                                           font-size:14;\
                                           margin-top:0px;\
                                    }"
                                   "#people { background: yellow\
                                              url('tipnbpeople_icon.png')\
                                              no-repeat left center;\
                                              padding-left: 45 px;\
                                              line-height: 40px;\
                                   }"
                                   "#container {\
                                            width: 300px; \
                                            margin:0px auto;\
                                            border:1px dashed #333;\
                                   }"

                                   "</style>"

                                   "<body>"
                                        "<h1>%@</h1>"
                                        "<div id=\"container\">\
                                            <div id=\"people\">Caption1</div>\
                                            <div id=\"people\">Caption2</div>\
                                            <div id=\"people\">Caption3</div>\
                                        </div>"
                                   "</body></html>"\
                                   , noAccentTipName];

The result i am getting is a succession of icon and caption but not on the same line. Any idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the margin:0px auto allows to center a containing block on a page. Here the width I set was fixed. Since it was fixed the content will try to fit within the fixed width and is displayed in multiple lines. What i need to use instead is to use the text-align for the container div.

    Here is the code i finally use:

     NSString* htmlContentString = [NSString stringWithFormat:
                                   @"<html>"
                                   "<style type=\"text/css\">"
                                   "h1 { font-size: 40px;\
                                         font-family: Wisdom Script;\
                                         text-align: center;\
                                         margin-top:15px;\
                                         margin-bottom:0px;\
                                         background-color: transparent;\
                                   }"
                                   "body { background-color:transparent;\
                                           font-family:Helvetica;\
                                           font-size:14;\
                                           margin-top:0px;\
                                    }"
                                   " img {\
                                          width:40px;\
                                          height:35px;\
                                          vertical-align:bottom;\
                                   }"


                                   "#text {\
                                        width:60px\
                                   }"
                                   "#container {\
                                            text-align:center;\
                                   }"
                                   ".insetText {\
                                   color: #020202;\
                                   text-shadow: 0 -1px 0 rgba(0,0,0,0.15),\
                                   0 1px 0 rgba(255,255,255,0.8)}"
                                   "@font-face { font-family: 'Wisdom Script'; \
                                   src: local('WisdomScriptAI'),\
                                   url('wisdom_script.ttf') format('truetype'); }"
                                   "</style>" //end the style section

                                   "<body>" //start content
                                        "<h1 class=\"insetText\">%@</h1>"
                                        "<div id=\"container\" class=\"insetText\">\
                                            <img src=\"tipnbpeople_icon.png\"/>Caption1\
                                            <img src=\"clock_icon.png\"/>Caption2\
                                            <img src=\"chef_icon.png\"/>Captions3</div>"
                                   "</body></html>"\
                                   , noAccentTipName];

    This displays 3 icons with the corresponding caption on the same line.

    • 0