Need to center both image and text side by side

Hello,

Can you provide a screenshot of how you want the image and heading 3 text to appear like?

Thank you!

https://www.cutcabletoday.com/wp-content/uploads/2015/06/head-screen-shot.png

This is what it currently looks like. I want the head and “Mr. Cable Cutter recommends: Sling TV” to all be centered horizontally.

Thanks for the help!

Maybe some CSS would fix that, like:

display: block;
width: 100%;
text-align: center;

Remember to style the element which contains the avatar and the text.

Okay, this may sound like a dumb question, but where would I actually add this CSS? I know a bit about html, but my CSS knowledge is minimal. I rarely actually get into the CSS to change anything…

It is okay, and that isn’t a dumb question at all.

If you have access to the HTML ( maybe in the post editor TEXT mode ), go to the markup of the division ( or any other element ) that contains the avatar and text, and add this html attribute:

style="display: block; width: 100%; text-align: center;"

For example, assuming you have this:

<div>
  <img src="/path/" alt="" />
  <h3>Mr cable cutter recommends: <a href="#">Sling TV</a></h3>
</div>

Add the style attr. to the container div:

<div style="display: block; width: 100%; text-align: center;">
  <img src="/path/" alt="" />
  <h3>Mr cable cutter recommends: <a href="#">Sling TV</a></h3>
</div>

If something went wrong, just publish that page so that we can reach it and give you a proper solution.

The page is now live at https://www.cutcabletoday.com.

I tried the code you put, but it centered the avatar and the text, with the head above the text.

I was wondering if there is a way to take it exactly as it stands now and move the entire thing to the center, avatar and text side by side.

The code that is in there now is simply he result of me trying to manually space things in the wordpress visual editor window. It looks messy to me, but it is working so I have been hesitant to try and clean it up.

Hello.

Thanks for the link. I have spent sometime to set up a shortcode for you which you can use to display the “Mr. Cable Cutter Recommends..” divisions properly and style them without having WordPress to correct the syntax..

Add this code to your functions.php file:

function cc_recommends( $atts ) {
	$a = shortcode_atts( array(
        'text' => 'something',
        'url' => 'something else',
        'urltext' => 'something else again',
    ), $atts );
	ob_start();
?>
<style type="text/css">
.ct-recommends {
	text-align: center;
    display: block; border: 1px solid #BEBEBE;
    border-width: 1px 0;
    overflow: hidden;
    width: 100%;
}
.ct-recommends div {
	display: inline-block;
	max-width: 50%;
	vertical-align: -webkit-baseline-middle;
	vertical-align: middle;
}
</style>
<div class="ct-recommends">
	<div>
		<img class="wp-image-1644 alignleft lazy-loaded" src="https://www.cutcabletoday.com/wp-content/uploads/2015/06/MrCCT-Head1.png" data-lazy-type="image" data-src="https://www.cutcabletoday.com/wp-content/uploads/2015/06/MrCCT-Head1.png" alt="Mr. Cable Cutter" width="110" height="121"><noscript><img class=" wp-image-1644 alignleft" src="https://www.cutcabletoday.com/wp-content/uploads/2015/06/MrCCT-Head1.png" alt="Mr. Cable Cutter" width="110" height="121" /></noscript>
	</div>
	<div>
		<?php echo "<h3>{$a['text']}&nbsp;<a href=\"{$a['url']}\">{$a['urltext']}</a></h3>\n"; ?>
	</div>
</div>
<?php
	return ob_get_clean();
}

add_shortcode('cc-recommends', 'cc_recommends');

Now, add this shortcode where you want the recommending division to appear, and don’t forget to set up the shortcode attibutes (text, url, urltext) :

[cc-recommends text="Mr. Cable Cutter Recommends:" url="https://www.tkqlhce.com/click-7779591-12190119-1429549752000" urltext="Sling TV"]

Since you have 3 recommendations in the homepage, you can use the same shortcode everytime and adjust its attributes with the message(text), recommendation link(url) and the recommended service name (urltext).

Let me know how it goes ??

Samuel

Thanks so much for this. I will try this later today and let you know. Much appreciated.

No worries, you’re welcome.
Keep me posted ??

Samuel,

I put the css in and received this:

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

No my site is down. Can you help? What went wrong?

I can’t even log in to my wordpress dashboard anymore..any clue?

Where did you put that code? in your functions.php file?

yes i inserted it at the bottom

You must have missed some part or didn’t place the code well, because I tested it and it worked for me.

Can you login to ftp ?

Yes I am in FTP now