Question

我目前正在使用UIWebview进行一些富文本格式化。我想在同一行中心连续一个图标（PNG图像），然后是一个标题。我有问题正确设置我的CSS样式以获得预期的效果。它更像是一个css相关的问题，而不是目标C.

到目前为止，我所做的是：

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];

我得到的结果是一连串的图标和标题，但不是在同一条线上。有什么想法吗？

Answer 1

margin:0px auto允许在页面上居中包含块。这里我设定的宽度是固定的。由于它已被修复，因此内容将尝试适合固定宽度并以多行显示。我需要使用的是使用text-align作为容器div。

这是我最终使用的代码：

 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];

这会在同一行显示3个带有相应标题的图标。

如何将一系列图标和标题集中在同一行（UIWebView）

1 个答案: