Центрирование img в теме призрака

Я использую бесплатную тему Starter на Ghost, и я пытаюсь сделать изображение центрированным, но более широким, чем абзац и основной элемент (60rem).Центрирование img в теме призрака

Вот основные CSS элементы, которые удерживают изображение на месте, я могу получить изображение на всю ширину (я использую 1100px шириной изображения), когда я изменить максимальную ширину в IMG на 150%, но это не таким образом, это похоже на поплавки справа.

я издевался до грубой jsfiddle для этого - https://jsfiddle.net/zbsa7ech/

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

Единственный способ, которым я смог получить желаемый результат, чтобы поставить максимальную ширину до 200%, а рентабельность левого: -254px

Любые решения просто поместить изображение в центр контейнера, не прибегая к отрицательной границе?

источник

2016-12-29 TM23

Вы можете добавить класс к тегу абзаца, как этого 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; 
}

источник

2016-12-29 13:11:27

Вы можете просто удалить ограничение ширины от «основного» элемента, и просто применить его к абзацы, оставляя img безусловным.

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

источник

2016-12-29 13:16:31

ответ

Смежные вопросы