Ghost 테마의 가운데 맞추기

Ghost에서 무료 초보 테마를 사용하고 있으며 이미지를 가운데에 배치했지만 단락과 기본 요소 (60rem)보다 넓게 만들려고합니다. 여기 Ghost 테마의 가운데 맞추기

장소에서 이미지를 보유하고있는 주요 CSS 요소이다, 나는 전체 폭 이미지를 얻을 수 있습니다 내가 IMG 150 %에서 최대 폭을 변경할 때 (내가 1100px 넓은 이미지를 사용)하지만 그것은 아니다 그런 식으로 중심을 잡았습니다. 오른쪽으로는 일종의 떠있었습니다.

나는 이것에 대한 거친 jsfiddle을 조롱 - https://jsfiddle.net/zbsa7ech/ 내가 원하는 결과를 얻을 수 있었다 유일한 방법은 200 %에 최대 폭을 넣고 여백 - 왼쪽에

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

: -254px

부정적인 여백을 남기지 않고 이미지를 컨테이너의 중앙에 간단히 넣을 수있는 솔루션은 무엇입니까?

당신이 fiddle

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

CSS 같은 단락 태그에 클래스를 추가 할 수 있습니다

출처

2016-12-29 TM23

.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

Ghost 테마의 가운데 맞추기

답변

관련 문제