I have this html:
<div>
<img class="image">
<p class="text"></p>
</div>
I want my text to be dinamically divided into two columns, so I'm using the column-count
property:
p.text
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
I also want to center the image between the two columns, in width and height, so that I obtain this effect:
How would you accomplish the task?
Is it possible to get the job done with css only?
If not, is there a way to do it with javascript, keeping the column-count
property?
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property. If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.
To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center. P.S.: place-items with a value of center centers anything horizontally and vertically.
Using Text-align property Another way to align image to the left, centre or right of the page is to use the text-align property. The html code uses the <div> tag and inline CSS style.
There is no simply way to do this. However, you can "fake" the wrapping effect by using pseudo-elements.
* {
margin: 0px;
padding: 0px;
}
.text {
width: 49%;
}
#text-l {
float: left;
}
#text-r {
float: right;
}
#text-l:before, #text-r:before {
content: "";
width: 125px;
height: 250px;
}
#text-l:before {
float: right;
}
#text-r:before {
float: left;
}
.image {
height: 250px;
width: 250px;
position: absolute;
left: 50%;
margin-left: -125px;
background-color: yellow;
}
<div>
<img class="image" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<p class="text" id="text-l">
How to create a Minimal, Complete, and Verifiable example
When 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…
…Minimal – Use as little code as possible that still produces the same problem
…Complete – Provide all parts needed to reproduce the problem
…Verifiable - Test the code you're about to provide to make sure it reproduces the problem
Minimal
</p>
<p class="text" id="text-r">
The more code there is to go through, the less likely people can find your problem. Streamline your example in one of two ways:
Restart 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.
Divide 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 – then add the last part back.
Minimal and readable
Minimal 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.
</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With