Centering img in Ghost theme

Question

Centering img in Ghost theme

1.2k views Asked by TM23 At 21 September 2024 at 15:54

I'm using the free Starter theme on Ghost and I'm trying to make the image centered but wider than the paragraph and the main element (60rem).

Here are the main CSS elements that hold the image in place, I can get the image to the full width (I use 1100px wide images) when I change the max-width in img to 150% but it's not centered that way, it sort of floats to the right.

I mocked up the rough jsfiddle for 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 way I managed to get the desired result is to put the max-width to 200% and margin-left: -254px

Any solutions to simply put the image in the center of the container without resorting to negative margin left?

Original Q&A

There are 2 answers

**Renzo Calla** · Answer 1 · 2016-12-29 13:11:27

You can add a class to the paragraph tag like this fiddle

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

css

.img-container{
 display:flex;
 justify-content:center;
}

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

**Mark Wilkins** · Answer 2 · 2016-12-29 13:16:31

You can just remove the width constraint from the 'main' element, and just apply it to the paragraphs, leaving the img unconstrained.

CSS:

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;
}

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>

Codepen: http://codepen.io/mwilkins91/pen/vyoeGg?editors=1100

TechQA.

Centering img in Ghost theme

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in IMAGE

Related Questions in GHOST-BLOG

Related Questions in GHOST

Popular Questions

Popular Tags

Trending Questions