CSS - Responsive floating and vertically centered text with pull left-right classes

Hi there,

So a recent problem that has come up is floating text over the top of an image while also vertically centering this within the column. Another issue is that I haven’t been able to reliably vertically centre text within a column due to the pull-left and pull-right classes which create a float to work - this is needed so I have control over what content appears first when the page is viewed on mobile.

If pull-left and pull-right isn’t required then I’ve tended to use CSS to change the display to table and then CSS to create table cells, float set to none and vertical-align to middle.

Please find attached a demo showing the absolute-positioned text and an example of text within a column which I would like to be vertically centered.

https://wetransfer.com/downloads/faadf45d3b219fc1a75beb21331f798c201

Cheers,

Andrew

Hi there Shoxt3r,

404 :wonky:

coothead

3 Likes

Float, by its very nature will place the element at the top of its parent container. If it went to the bottom it would be called “sink”, or “neutral buoyancy” if it hung around in the middle somewhere. So float is possibly not what you wan there.

Flex-box, not only makes centring in either direction easy, it also allows the re-ordering of elements. Maybe that is an option for you.

2 Likes

Hi there,

Apologies, I tried using We Transfer but looks like it didn’t work. Code below:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href="http://getskeleton.com/dist/css/skeleton.css" rel="stylesheet" />
<style type="text/css">
#ws-responsive-article-container .columns{
	position:relative;	
}

#ws-responsive-article-container p{
	font-size:1.2rem;	
	text-align:center;
}

#ws-responsive-article-container p.floated-text{
	position:absolute;
	top:0;	
}

</style>
<!-- START article container -->
<div id="ws-responsive-article-container">
    <!-- START section -->
	<div class="section">
		<!-- START inner container -->
		<div class="container u-full-width">
			<div class="row">
            	<div class="columns twelve">
                	<div class="columns six u-pull-left"><img src="http://placehold.it/350x550" class="u-full-width" /></div>
                    <div class="columns one u-pull-left">&nbsp;</div>
                    <div class="columns four u-pull-left">
                    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lectus ac dolor lacinia commodo. Nulla lacinia orci quis est tempus imperdiet. Aliquam condimentum finibus porta. Cras rhoncus augue vitae leo tincidunt ullamcorper. Suspendisse sollicitudin maximus mollis. Vestibulum varius lacus in massa pellentesque, ac efficitur ex luctus. Quisque in blandit purus. Suspendisse potenti. Nunc faucibus urna eget augue blandit sollicitudin. Morbi mollis justo at felis auctor gravida. Nullam dignissim sem ligula, sit amet ultricies justo posuere a.</p>
                    </div>
                    <div class="columns one u-pull-left">&nbsp;</div>
                </div>
               	<div class="columns twelve">
                	<div class="columns six u-pull-right"><img src="http://placehold.it/350x550" class="u-full-width" /></div>
                    <div class="columns one u-pull-right">&nbsp;</div>
                    <div class="columns four u-pull-right">
                    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lectus ac dolor lacinia commodo. Nulla lacinia orci quis est tempus imperdiet. Aliquam condimentum finibus porta. Cras rhoncus augue vitae leo tincidunt ullamcorper. Suspendisse sollicitudin maximus mollis. Vestibulum varius lacus in massa pellentesque, ac efficitur ex luctus. Quisque in blandit purus. Suspendisse potenti. Nunc faucibus urna eget augue blandit sollicitudin. Morbi mollis justo at felis auctor gravida. Nullam dignissim sem ligula, sit amet ultricies justo posuere a.</p>
                    </div>
                    <div class="columns one u-pull-left">&nbsp;</div>
                </div>
                <div class="columns twelve">
                	<div class="columns six u-pull-left">
                    	<img src="http://placehold.it/350x550" class="u-full-width" />
                        <p class="floated-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                    <div class="columns one u-pull-left">&nbsp;</div>
                    <div class="columns four u-pull-left">&nbsp;</div>
                    <div class="columns one u-pull-left">&nbsp;</div>
                </div>
               	<div class="columns twelve">
                	<div class="columns six u-pull-right floated-text">
                    	<img src="http://placehold.it/350x550" class="u-full-width" />
                    	<p class="floated-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                    <div class="columns one u-pull-right">&nbsp;</div>
                    <div class="columns four u-pull-right">&nbsp;</div>
                    <div class="columns one u-pull-left">&nbsp;</div>
                </div>
            </div>
		</div><!-- END inner container -->
    </div><!-- END section -->
</div><!-- END article container -->

Cheers,

Andrew

Thanks Sam, I will look into using Flexbox - any particular sites/documents you think might be of use?

I found this reference useful in learning flexbox.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.