我目前正在使用 UIWebview 进行一些富文本格式设置。我想在同一行上集中显示一系列图标(PNG 图像)，然后是标题。我在正确设置我的 css 样式以获得预期效果时遇到问题。与 Objective C 相比，它更像是一个与 css 相关的问题。
到目前为止我所做的是:
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];
我得到的结果是一连串的图标和标题，但不在同一行。有什么想法吗？
最佳答案
margin:0px auto 允许在页面上居中包含 block 。这里我设置的宽度是固定的。由于它是固定的，内容将尝试适应固定宽度并以多行显示。我需要使用的是对容器 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 个带有相应标题的图标。
关于html - 如何将一系列图标和标题居中放置在同一行 (UIWebView)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10654533/