如何在CSS中的两列之间居中图像？

Question

我有这个HTML:

<div>
    <img class="image">
    <p class="text"></p>
</div>

我希望我的文本在dinamically分为两列,所以我使用的column-count属性:

p.text
{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

我还想在两列之间以宽度和高度为中心,这样我就可以获得这样的效果:

你将如何完成任务？
是否可以仅使用css完成工作？
如果没有,有没有办法用javascript,保持column-count财产？

Answer 1

没有简单的方法可以做到这一点。但是，您可以使用伪元素“伪造”环绕效果。

\n\n

\r\n

\r\n

* {\r\n  margin: 0px;\r\n  padding: 0px;\r\n}\r\n\r\n.text {\r\n  width: 49%;\r\n}\r\n\r\n#text-l {\r\n  float: left;\r\n}\r\n\r\n#text-r {\r\n  float: right;\r\n}\r\n\r\n#text-l:before, #text-r:before {\r\n  content: ""; \r\n  width: 125px; \r\n  height: 250px;\r\n}\r\n\r\n#text-l:before {\r\n  float: right;\r\n}\r\n\r\n#text-r:before {\r\n  float: left;\r\n}\r\n\r\n.image {\r\n  height: 250px;\r\n  width: 250px;\r\n  position: absolute;\r\n  left: 50%;\r\n  margin-left: -125px;\r\n  background-color: yellow;\r\n}

\r\n

<div>\r\n    <img class="image" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">\r\n    <p class="text" id="text-l">\r\n      How to create a Minimal, Complete, and Verifiable example\r\n\r\nWhen asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be\xe2\x80\xa6\r\n\r\n\xe2\x80\xa6Minimal \xe2\x80\x93 Use as little code as possible that still produces the same problem\r\n\xe2\x80\xa6Complete \xe2\x80\x93 Provide all parts needed to reproduce the problem\r\n\xe2\x80\xa6Verifiable - Test the code you\'re about to provide to make sure it reproduces the problem\r\nMinimal\r\n    </p>\r\n    <p class="text" id="text-r">\r\n      The more code there is to go through, the less likely people can find your problem. Streamline your example in one of two ways:\r\n\r\nRestart from scratch. Create a new program, adding in only what is needed to see the problem. This can be faster for vast systems where you think you already know the source of the problem. Also useful if you can\'t post the original code publicly for legal or ethical reasons.\r\nDivide and conquer. When you have a small amount of code, but the source of the problem is entirely unclear, start removing code a bit at a time until the problem disappears \xe2\x80\x93 then add the last part back.\r\nMinimal and readable\r\n\r\nMinimal does not mean terse - don\'t sacrifice communication to brevity. Use consistent naming and indentation, and include comments if needed to explain portions of the code. Most code editors have a shortcut for formatting code - find it, and use it! Also, don\'t use tabs - they may look good in your editor, but they\'ll just make a mess on Stack Overflow.\r\n    </p>\r\n</div>

\r\n

\r\n

\r\n

\n