Aligning an image within the layout of a Ghost theme

I'm currently using Ghost's free Starter theme and I'm attempting to center an image that is wider than the paragraph and main element (60rem).

These are the key CSS elements that control the positioning of the image. I can achieve full width for the image (using 1100px wide images) by changing the max-width in img to 150%, but it does not become centered this way, instead appearing to float to the right.

I have created a basic jsfiddle demonstration of this - https://jsfiddle.net/zbsa7ech/

img {
display: inline-block;
max-width: 100%;
min-height: 0;
height: auto;
vertical-align: middle;
border-radius: 5px;
}

The only method I found to achieve the desired outcome is by setting the max-width to 200% and applying margin-left: -254px

Are there any solutions available to easily center the image within the container without the need to use negative margin left?

Answer №1

To make the layout more dynamic, consider removing the width restriction from the 'main' element and applying it only to the paragraphs while keeping the image unconstrained.

Custom Styling:

body {
    margin: 0;
    color: #283037;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6;
}


.container {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 112rem;
    margin: 0 auto;
    padding: 0 2rem;
}


.site-main {
    width: 100%;

    margin: 0 auto;
}
.wrapper {
    max-width: 60rem;
    margin: 0 auto;
}


img {
    display: block;
    max-width: 100%;
    min-height: 0;
    height: auto;
    vertical-align: middle;
    border-radius: 5px;
    margin: 0 auto;
}

Structured HTML:

<body>
<div class="container">

<header class="site-header"></header>

<main class="site-main wow fadeIn">

<p class='wrapper'>The Southern Railway (SR) gave the designation Sub to the wide variety of electric multiple units that were used on inner-suburban workings in the South London area. Originally these units were formed as three-car units, but in the 1940s, all surviving units were increased to four cars by the addition of an 'Augmentation' trailer. New four-car units were also built at this time, and these survived in passenger use until late 1983, by which time British Rail had allocated to them TOPS Class 405.</p>

<p><img src="https://i.sli.mg/DZAkY8.jpg" alt=""></p>

<p class='wrapper'>The Southern Railway (SR) gave the designation Sub to the wide variety of electric multiple units that were used on inner-suburban workings in the South London area. Originally these units were formed as three-car units, but in the 1940s, all surviving units were increased to four cars by the addition of an 'Augmentation' trailer. New four-car units were also built at this time, and these survived in passenger use until late 1983, by which time British Rail had allocated to them TOPS Class 405.</p>

</main>
</div>
</body>

Find the demonstration on Codepen: http://codepen.io/mwilkins91/pen/vyoeGg?editors=1100

Answer №2

To assign a specific style to your paragraph tag, simply add a custom class like shown in this example

<p class="styled-paragraph"><img src="https://i.sli.mg/DZAkY8.jpg" alt=""></p>

Custom CSS code:

.styled-paragraph{
 display:flex;
 justify-content:center;
}

img {
 display: inline-block;
 max-width: 200%;
 min-height: 0;
 height: auto;
 vertical-align: middle;
 border-radius: 5px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating virtual hover effects on Android browsers for touch events

My Wordpress website is currently utilizing Superfish 1.5.4 to display menu items. The menu on my site includes several main menu items, which are clickable pages, and hovering over these main items should reveal sub-menu options. When I hover over a mai ...

Load CSS styles once the HTML content has been generated by the PHP script

One way to dynamically add a section of HTML during page load is by making use of PHP in the index.php file: In your index.php file, you can include a section like this: <html> <head> <link href="css/style.css" rel="stylesheet"> ...

Implementing AngularJS to display different divs according to the selected value

I am attempting to utilize the value of an HTML select element to toggle the visibility of specific div tags using AngularJS. Below is the code snippet I have been working with: <body ng-app="kiosk" id="ng-app" > <div class="page" ng-controll ...

Is there a way to use HTML to prevent the user from navigating away from the current page when submitting a form? Could jQuery, PHP, or a combination of

Is it achievable to send a message using PHP and keep the user on the same page after clicking "Send Message" button? Perhaps changing the submit button to a success message on the following page: . Can this task be accomplished with PHP and jQuery? ...

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

Submit an image file to the server using the provided URL

Is it feasible to utilize ajax to send an image to a flask server in request.files by entering the URL through a form? Below is the current form setup: <form method=post enctype=multipart/form-data runat="server" id="capture_form"> <div class="fo ...

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

I am struggling with positioning the following div on my webpage. .div { width:100%; padding-bottom:20%; background-color:blue; } <div class="div"></div> I have been searching for a solution to vertically center this responsive div on my web ...

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

Region Covered by Mouse Over Does Not Extend Across Whole Div

On my website, there is an arrow located on the middle right side that, when hovered over with the mouse, reveals a sidebar. Clicking on each icon in the sidebar further extends it to reveal more content. However, the issue I am facing is that the sidebar ...

Welcome to the PHP ChatRoom where only messages are displayed without revealing the usernames! Join in

I have successfully created a Chat Room using PHP, but I am facing an issue where only the messages are being displayed without the corresponding usernames. Separate databases for usernames and messages have been set up, yet the usernames are not appearing ...

Ensuring the checkbox is disabled prior to editing

Check out my table below: https://i.stack.imgur.com/7byIa.png Whenever I click the edit button, I can modify the status field and action field. This feature works correctly. However, the issue is that I am able to change the values of status and action e ...

Button-operated lightbox image slider

I am currently developing a website on WAMP where users can store images and view them in a lightbox effect. I have successfully implemented the lightbox effect, but I am facing challenges with moving between images within the lightbox. <html> <? ...

A guide on switching out an HTML element with an AJAX response

How can I dynamically replace an HTML element with Ajax response? I know how to remove the element, but I'm unsure how to then insert the new content from the Ajax call. For instance, let's say I have the following code: <ul id="products"> ...

Is there a way to make the Sweetalert2 alert appear just one time?

Here's my question - can sweetalert2 be set to only appear once per page? So that it remembers if it has already shown the alert. Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, ...

creating an interactive element that seamlessly integrates with a dynamic background image slideshow

Struggling to make this work correctly as a newbie in javascript. I need the background image to slide upon hover and stay active on its selected div when clicked. The html, css, and javascript I have currently work fine - when the user clicks on a div, a ...

What is the best way to navigate to the href link?

After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

After spending hours practicing creating a navbar using Bootstrap 3.3.7, I've hit a roadblock - the dropdown is not working when clicked on. It's frustrating because I have double-checked all my scripts and ensured that I have the latest version ...

What is the best way to show a loading spinner as my Next image component loads, especially when there is an existing image already being displayed?

I'm trying to incorporate a loading spinner or any other HTML element while an image is being loaded. Currently, I am utilizing the ImageComponent to showcase images in a random movie generator. Although I managed to make the spinner work for the init ...

Conceal Element without Eliminating from the Design

Need a solution: I have specific icons to display for certain elements, but not all. However, when hiding the icon, I want the spacing of the element to stay consistent. Is there a method to conceal an image within an element while preserving its allocat ...