양쪽 정렬 된 갤러리 레이아웃에서 이미지 중간의 가운데 아이콘

할 넥스

내가 사용하고 정당화 갤러리 나는 또한 이미지에 CSS 호버 효과를 사용하고, 이미지를 정당화하기 위해 라이브러리를 그 표시한다 FontAwesome 아이콘 위에 떴다.

문제는 각 이미지가 그리드에 맞도록 Justified Gallery 플러그인에 의해 지정된 크기가 다르기 때문에 아이콘이 각 이미지 위에 다른 위치에 표시된다는 것입니다.

아이콘이 각 이미지 중앙의 동일한 고정 위치에 나타나도록하고 싶습니다.

그리드 모양과 아이콘이 더 작고 큰 썸네일에 표시되는 방식은 다음과 같습니다.

JS 바이올린 https://jsfiddle.net/halnex/3shtoyzz/3/

내 HTML은 다음과 같습니다.

<div id="mygallery" class="global-height scrollable">
    <div class="hovereffect">
        <img alt="Title 1" src="assets/images/posts/thumbs/post-1.jpg"/>
        <div class="overlay">
            <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
        </div>
    </div>

    <div class="hovereffect">
        <img alt="Title 1" src="assets/images/posts/thumbs/post-2.jpg"/>
        <div class="overlay">
            <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
        </div>
    </div>
    <div class="hovereffect">
        <img alt="Title 1" src="assets/images/posts/thumbs/post-3.jpg"/>
        <div class="overlay">
            <a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
        </div>
    </div>
</div>

그리고 이것은 내 CSS입니다.

.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.7);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
    background-color: rgba(48, 152, 157, 0.1);
}

.hovereffect img {
    display: block;
    position: relative;
}

.hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
}

.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
    color: #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-weight: normal;
    margin: 100px 50px;
}

.hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.hovereffect a.info:hover {
    /*box-shadow: 0 0 5px #fff;*/
}

자바 스크립트

$(document).ready(function() {
    $("#mygallery").justifiedGallery({
        rowHeight : 155,
        lastRow : 'justify',
        margins : 0,
        captions: false
    });
});

여기에 이미지 설명 입력

램 토볼 스키

센터링 시도 display: flex

https://jsfiddle.net/ramtob/3shtoyzz/4/

나는 클래스에 추가 .overlay하고 .hovereffect이 플렉스 중심 코드 :

  display: flex;
  justify-content: center;
  align-items: center;

또한 아이콘이 아닌 이미지를 절대 위치에 배치하여 아이콘의 중심을 방해하지 않도록했습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Qt의 가로 레이아웃에서 항목을 왼쪽에 정렬

분류에서Dev

중앙 및 왼쪽 정렬 콘텐츠가있는 2 열 레이아웃

분류에서Dev

이미지의 왼쪽과 오른쪽에 세로로 가운데 정렬 된 탐색 화살표 배치

분류에서Dev

이미지 갤러리 정렬 문제

분류에서Dev

Android : 중첩 된 선형 레이아웃에서 오른쪽으로 텍스트 정렬

분류에서Dev

정렬 된 양식-배경 이미지 중간의 입력 필드 / 버튼

분류에서Dev

저장된 이미지가 갤러리에 표시되는 데 시간이 걸립니다.

분류에서Dev

Android : 중첩 된 레이아웃에서 뷰에 액세스하는 데 시간이 걸리나요?

분류에서Dev

아이콘 (위쪽)과 텍스트 (아래쪽)가 모두 왼쪽에 정렬 된 JButton

분류에서Dev

양식을 가운데에 정렬하는 방법, 그러나 입력의 맨 왼쪽 위에 레이블이 있어야합니다.

분류에서Dev

두 개의 열, 이미지 왼쪽 콘텐츠 오른쪽-콘텐츠가 아닌 이미지 크기 조정

분류에서Dev

RecyclerView의 목록 항목에서 잘못된 레이아웃 정렬

분류에서Dev

맞춤 이미지가있는 부트 스트랩 버튼의 텍스트 및 아이콘 왼쪽 정렬

분류에서Dev

CSS에서 오른쪽 정렬 된 텍스트를 사용하여 다양한 크기의 이미지 크기 조정 및 중앙 정렬

분류에서Dev

갤러리에서 Android의 ImageView로 이미지 가져 오기

분류에서Dev

Nimbus Look and Feel에서 JTabbedPane의 왼쪽에 아이콘 정렬

분류에서Dev

이미지의 오른쪽 상단 모서리에 CSS 버튼 (갤러리)

분류에서Dev

랜딩 페이지의 가운데 정렬 된 이미지를 다른 페이지에 연결

분류에서Dev

이미지가 중첩 된 레이아웃에서 AspectFill로 가로로 채워지지 않습니다.

분류에서Dev

React Native에서 아이콘을 왼쪽에, 텍스트를 가운데에 정렬

분류에서Dev

Android Studio의 레이아웃 미리보기의 구성 요소 정렬이 장치에 표시된 것과 일치하지 않습니다.

분류에서Dev

Picasa // Google + 동기화 된 폴더의 갤러리에서 이미지를 가져올 수 없습니다.

분류에서Dev

디스플레이 테이블 레이아웃에서 부트 스트랩 글 리피 콘 브레이크 정렬의 글꼴 크기 변경

분류에서Dev

JQuery 이미지 갤러리-선택한 이미지가 일시적으로 레이아웃을 변경 함

분류에서Dev

내 갤러리 이미지 중 하나가 잘못된 이유는 무엇입니까?

분류에서Dev

2 열 레이아웃의 가운데 이미지

분류에서Dev

갤러리의 이미지를 영웅 섹션에 추가

분류에서Dev

thymeleaf 레이아웃에 포함 된 이미지가 표시되는 데 시간이 오래 걸리는 이유는 무엇입니까?

분류에서Dev

레이아웃 관리자에서 이미지가 가운데에 있지 않습니다.

Related 관련 기사

  1. 1

    Qt의 가로 레이아웃에서 항목을 왼쪽에 정렬

  2. 2

    중앙 및 왼쪽 정렬 콘텐츠가있는 2 열 레이아웃

  3. 3

    이미지의 왼쪽과 오른쪽에 세로로 가운데 정렬 된 탐색 화살표 배치

  4. 4

    이미지 갤러리 정렬 문제

  5. 5

    Android : 중첩 된 선형 레이아웃에서 오른쪽으로 텍스트 정렬

  6. 6

    정렬 된 양식-배경 이미지 중간의 입력 필드 / 버튼

  7. 7

    저장된 이미지가 갤러리에 표시되는 데 시간이 걸립니다.

  8. 8

    Android : 중첩 된 레이아웃에서 뷰에 액세스하는 데 시간이 걸리나요?

  9. 9

    아이콘 (위쪽)과 텍스트 (아래쪽)가 모두 왼쪽에 정렬 된 JButton

  10. 10

    양식을 가운데에 정렬하는 방법, 그러나 입력의 맨 왼쪽 위에 레이블이 있어야합니다.

  11. 11

    두 개의 열, 이미지 왼쪽 콘텐츠 오른쪽-콘텐츠가 아닌 이미지 크기 조정

  12. 12

    RecyclerView의 목록 항목에서 잘못된 레이아웃 정렬

  13. 13

    맞춤 이미지가있는 부트 스트랩 버튼의 텍스트 및 아이콘 왼쪽 정렬

  14. 14

    CSS에서 오른쪽 정렬 된 텍스트를 사용하여 다양한 크기의 이미지 크기 조정 및 중앙 정렬

  15. 15

    갤러리에서 Android의 ImageView로 이미지 가져 오기

  16. 16

    Nimbus Look and Feel에서 JTabbedPane의 왼쪽에 아이콘 정렬

  17. 17

    이미지의 오른쪽 상단 모서리에 CSS 버튼 (갤러리)

  18. 18

    랜딩 페이지의 가운데 정렬 된 이미지를 다른 페이지에 연결

  19. 19

    이미지가 중첩 된 레이아웃에서 AspectFill로 가로로 채워지지 않습니다.

  20. 20

    React Native에서 아이콘을 왼쪽에, 텍스트를 가운데에 정렬

  21. 21

    Android Studio의 레이아웃 미리보기의 구성 요소 정렬이 장치에 표시된 것과 일치하지 않습니다.

  22. 22

    Picasa // Google + 동기화 된 폴더의 갤러리에서 이미지를 가져올 수 없습니다.

  23. 23

    디스플레이 테이블 레이아웃에서 부트 스트랩 글 리피 콘 브레이크 정렬의 글꼴 크기 변경

  24. 24

    JQuery 이미지 갤러리-선택한 이미지가 일시적으로 레이아웃을 변경 함

  25. 25

    내 갤러리 이미지 중 하나가 잘못된 이유는 무엇입니까?

  26. 26

    2 열 레이아웃의 가운데 이미지

  27. 27

    갤러리의 이미지를 영웅 섹션에 추가

  28. 28

    thymeleaf 레이아웃에 포함 된 이미지가 표시되는 데 시간이 오래 걸리는 이유는 무엇입니까?

  29. 29

    레이아웃 관리자에서 이미지가 가운데에 있지 않습니다.

뜨겁다태그

보관