Menu
I'm attempting to find a pure CSS solutions to create an article with a featured quote section that starts 50px (or so) down the page. This section should be 50% width and the text should wrap around it (top and bottom).
Current I have the standard float solution, where it appears at the top of the text.
Fiddle demo
.inset-text {
display:block;
width: 50%;
float: left;
background: pink;
margin: 0 5% 2% 0;
}
352
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment.
Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.
What about another div wrapper and a bit of top padding and negative margin?
DEMO
HTML
<div class="article-container">
<div class="inset-text">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="article-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS
.article-container {
padding-top: 50px;
}
.inset-text {
/* display:block; */
width: 50%;
float: left;
background: pink;
/* margin: 0 5% 2% 0; */
margin-right: 2%;
}
.article-text {
margin-top: -50px;
}
/*
Because of the top padding set to the article-container the top margin of the first
p element does not collapse anymore. So just set the top margin to 0.
*/
.article-text p:first-child {
margin-top: 0;
}
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
