webkit-box ? 이게 뭔지...박스 위치를 좌측상단으로 위치이동
본문
COMPANY 모바일 테마 index중에 아래 소스가 있는데요
이 푸른색 박스가 항상 정중앙에 있는데요, 좌측 상단쪽에 나오게끔 하려고 합니다.
좌측상단 기준으로 50px,50px 떨어진 곳에서 나오도록 하려면 어떻게 해야할지..어렵네요...
.swiper-container .bn_txt 클래스에서 조정하는건지요?
도움좀 부탁드려요.ㅠ..
/*메인이미지 */
.swiper-container {width: 100%;height:500px;}
.swiper-slide {background:url(../img/main_bg1.jpg) no-repeat 50% 50%; background-size: cover;height:500px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-container .bn_txt{background-color:rgba(39, 120, 197,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);width:250px; height:200px;padding:25px;color:#fff}
.swiper-container .bn_txt h2{text-shadow: 0 1px 1px rgba(0, 0, 0, .3);color:#fff;font-size:2.4em;line-height:40px;margin-top:10px}
.swiper-container .bn_txt p{color:#fff;background:url(../img/bn_pbg.jpg) no-repeat top left;padding-top:20px;margin-top:20px ;font-size:1.34em;line-height:23px;}
.swiper-container .swiper-pagination-bullet{opacity:1;border-radius:0;margin:0 !important;border:none;text-indent:-9999px;width:48px;height:4px;background:#3e3c52;overflow:hidden;display:inline-block;margin:0 ; zoom:1; *display:inline /*IE7 HACK*/; _display:inline; /*IE6 HACK*/}
.swiper-container .swiper-pagination-bullet-active{background:#3d96d6}
답변 1
원하는 박스의 클래스명에 해당되는 CSS에서
{ position:relative; top:50px; left:50px; }
를 추가하세요
webkit-box 는 정렬방식을 조절하는 css의 옵션값입니다.