关于前端布局的一个小问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2982 天前的主题，其中的信息可能已经有所发展或是发生改变。

开发环境，本地 chrome + macOS 我最近参照阿禅的微信排版格式用 python 代码写了一个批处理脚本，但是呢，在处理完成后的部分效果如图所示：

1.顶部的文字无法居中

2.引用部分的右括号位置移位

在 2 中，我尝试通过 margin-top:-8%,拉开与文本之间的距离，结果与上方段落有重合。

要达成的效果如下图：

编写的 html 文件链接，最好下载到本地用 chrome 查看，在 cdn 变形严重。

阿禅教程链接：

8 条回复 • 2016-09-23 15:50:44 +08:00

66beta

2016-09-23 13:34:08 +08:00

一言难尽，楼主还是学一下 css 吧

learnshare

2016-09-23 13:48:17 +08:00

margin-top:-8% 这个可能会带来更多的问题

plantparknet

2016-09-23 14:26:10 +08:00

@66beta 如果有大师点播的话，学习会更快一点哈~~
@learnshare 是，感觉是无奈之举，测试过一些，也就它暂时有效

kamal

2016-09-23 14:38:44 +08:00

为什么不直 F12(windows+chrome)看教程文章？

Benisme

2016-09-23 14:45:32 +08:00

第二个根据你的代码最简单的修改就是在文字那段清除浮动。至于第一个，我用 ie 和 chrome 看到的都是居中，不知道啥情况

plantparknet

2016-09-23 15:31:13 +08:00

@Benisme 中间字符 float:none?好像并不行

Benisme

2016-09-23 15:42:04 +08:00

plantparknet

2016-09-23 15:50:44 +08:00

@Benisme 搞定。
第一个问题， chrome 中不知为何显示 text-align:left.当手动改成 center 后，其后的标题均 center 了
![]( http://7rf31y.com1.z0.glb.clouddn.com/WechatIMG15.jpeg)