我甚至不知道这是否可以使用CSS,但我不得不问.
请相应地在提供答案之前阅读规范.谢谢!
我的加价:
<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>
显然,.wrapper将具有我的img元素的高度,如果这是一个块.然后,我需要p元素在包装器内水平和垂直居中.我没有p元素的固定宽度或高度.
因此,无论段落大小甚至图像大小,都应该垂直和水平对齐,如http://i.imgur.com/phiR48H.png或http://i.imgur.com/Xvdt42j.png所示.
如果我在段落上设置绝对位置,它将不会垂直对齐,因为如果我不知道段落高度,我不能设置负边距.我在想桌子和桌子(vertical-align:middle;),但我只有1个单元格.有什么想法吗？
添加小提琴:http://jsfiddle.net/f3x7977z/
所提供的解决方案具有向后兼容性非常重要,特别是在IE8 +中.
为了最终结果,我们欢迎任何关于额外包装的建议!
尝试在 SVG 中生成饼图。在 Chrome 中工作正常，但在 Firefox 中不起作用。有任何想法吗？切片占馅饼的 35%。添加了 PI 来计算切片。我想我已经做对了一切。在 Mac 和 Windows 中尝试了最新的 Firefox。结果一样。切片不显示。必须添加 calc() 才能做正确的数学运算。
<svg height="20" width="20" viewBox="0 0 20 20" style="width: 500px; height: auto;">
<circle r="10" cx="10" cy="10" fill="#F2FBFF" />
<circle r="5" cx="10" cy="10" fill="transparent" stroke="#21BAFF" stroke-width="10" stroke-dasharray="calc(35 * 31.42 / 100) 31.42" transform="rotate(-90) translate(-20)" />
</svg>